Vue原理之观察者模式(发布订阅模式)实现单向数据流

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

观察者模式中如果是发布订阅模式,就会具备三个东西

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就是

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值