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、发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在
4、Vue响应式原理图
1、Vue把 data 中的成员注入到 Vue 实例,并且把 data 中的成员转成 getter/setter
2、Observer能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知 Dep
3、Compiler解析每个元素中的指令/插值表达式,并替换成相应的数据
4、Dep添加观察者(watcher),当数据变化通知所有观察者
5、Watcher数据变化更新视图
5、数据驱动