Vue的响应式原理---(v-model中的双向绑定原理)
Vue响应式原理
不要认为数据发生改变,界面跟着更新是理所当然.
具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git
看下图:
例子如下:
显示哈哈哈,但是当我们改变message时,也会相应改变
加了几个message之后,页面也相应得到变化
问题来了:
(1)app.message修改数据,Vue内部是如何监听message数据?
*Object.defineProperty-->监听对象属性的改变
当你的obj中的name发生改变之后:
obj.name="kobe"时,在set方法中监听name的改变
(2)当数据发生改变,Vue是如何知道要通知哪些人,界面发生刷新?
*发布订阅者设计模式
监听name改变后,要告诉谁?谁用就告诉谁,谁在用?
给每个使用的定义一个名字,谁用一次就会调用一次get方法,所以就知道谁在使用
定义依赖类
subs属性装的是watcher中的所有订阅者
定义订阅者
在get方法中,创建watcher(因为谁在使用get谁就是订阅者的一员)
const dep = new Dep();
const w1 = new Watcher('张三');
dep.addSub(w1);//添加订阅者
const w2 = new Watcher('李四');
dep.addSub(w2);//添加订阅者
在set方法中,调用dep中的notify方法
dep.notify();//通知所有的订阅者
在obj中的每个属性都会创建一个dep对象
使用图解分析过程如下:
具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git