首页 > 其他 > 详细

Vue的响应式原理---初部了解

时间:2020-01-09 13:43:53      阅读:100      评论:0      收藏:0      [点我收藏+]

Vue响应式原理

  不要认为数据发生改变,界面跟着更新是理所当然.

看下图:

技术分享图片

 

 例子如下:

技术分享图片

 

显示哈哈哈,但是当我们改变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对象

技术分享图片

 

 

使用图解:

技术分享图片

Vue的响应式原理---初部了解

原文:https://www.cnblogs.com/ahaMOMO/p/12170890.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!