Vue的响应式原理---(v-model中的双向绑定原理)

2024-10-08 10:49:07

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

最新文章

热门文章