任务三:Vue响应式原理

235 阅读1分钟

1、Vue2.0响应式原理

vue2.0的响应式原理是基于Object.defindeProperty来实现的

2、Vue3.0响应式原理

vue3.0中用的数据劫持用的是es6中的Proxy代理对象,Proxy IE不支持,
性能比Object.defindeProperty好,性能由浏览器优化。
Proxy直接监听对象,而非属性,把多个属性转换成get和set时不需要循环。

3、发布订阅模式/观察者模式

1、观察者模式是由具体目标调度,比如当事件触发,Dep 就会去调用观察者的方法, 所以观
察者模式的订阅者与发布者之间是存在依赖的。

2、发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在

image.png

4、Vue响应式原理图

image.png

1、Vue把 data 中的成员注入到 Vue 实例,并且把 data 中的成员转成 getter/setter

2、Observer能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知 Dep

3、Compiler解析每个元素中的指令/插值表达式,并替换成相应的数据

4、Dep添加观察者(watcher),当数据变化通知所有观察者

5、Watcher数据变化更新视图

5、数据驱动

image.png