观察者模式中如果是发布订阅模式,就会具备三个东西
1.Ovbserver 观察者
2.Vue 观察主体
3.Dep中心调度器
4.Watcher 订阅者
根据这个图我们使用发布订阅模式来理解一下,首先当vue实例对象的数据发生变化的时候,管擦和这就会观察到Objec.definePproperty中的set方法就会去通知Dep中心调度器,Dep此时就会发布消息,订阅者们就会收到消息并触发订阅方法,例如watcher1订阅了key=name1,watcher3也订阅了key=name1,当name1发生变化的时候Dep就会发布消息,当订阅者接收到信息后就会触发订阅者的update方法进行数据的更新,这是第一条线
第二条线就比较复杂,这里我们要知道一般v-model指令是用在input标签中的,当input中的数据发生变化我们的DOM层的数据发生变化的时候,v-model就会触发订阅者中的方法直接更新data中的数据

对于观察者模式不清晰的可以去看一下前两章观察者模式和观察者模式之发布订阅模式。
使用Vue的时候,我们一般都先new Vue()由此可以判断出Vue是一个构造函数或者一个类,我们就用ES6的类写法来写简单的Vue实现原理。
首先定义一个class Vue类
在vue2中我们Vue实现响应式是通过Objec.definePproperty来实现,所以首先我们先要监听到用户通过new Vue(参数),传递过来的参数。

这里我们可以看到options就是

文章详细解释了Vue中观察者模式的实现,涉及发布订阅模式的运作机制,包括Dep中心调度器和Watcher的角色。讲解了如何通过`Object.defineProperty`监听数据变化和双向数据流(v-model)的工作原理。
实现单向数据流&spm=1001.2101.3001.5002&articleId=138476887&d=1&t=3&u=b73ab500530b4ed3b192b46cdabfff90)
1022

被折叠的 条评论
为什么被折叠?



