Vue的双向绑定原理

1. 基本认知

Vue2是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty() 去劫持对象的访问器(Getter、Setter), 当对象的 属性值发生变化时可获取变化,然后根据变化来作后续响应;(一个一个属性的劫持)

个人理解: Vue是采用数据劫持结合发布者- 订阅者模式的方式, 通过 Object.defineProperty()  来劫持各个属性的setter、getter,在数据变动时,发送消息给订阅者,触发相应的监听回调,来实现页面的更新

Vue3中,则是通过 Proxy代理对象进行类似的操作。劫持的是整个对象,只要对象中的属性变化了,然后根据变化来作后续响应

2. 具体步骤

vue2的步骤:

第一步:

需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,这样的话,给这个对象的某个值赋值, 就会触发setter, 那么就能监听到了数据变化

第二步:

compile 解析模板指令, 将模板中的变量替换成数据, 然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图

第三步:

Watcher 订阅者是Observer 和 Compile 之间通信的桥梁,主要做的事情是:

1. 在自身实例化时往属性订阅器(dep)里面添加自己

2. 自身必须有一个update()方法

3. 待属性变动 dep.notice() 通知时, 能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。

第四步:

MVVM作为数据绑定的入口, 整合Observer、Compile和Watcher三者, 通过Observer来监听自己的model数据变化, 通过Compile来解析编译模板指令,最终利用Watcher搭起来Observer和Compile之间的通信桥梁,达到数据变化 =>试图更新; 视图交互变化(input) => 数据model变更的双向绑定效果。

3. Object.defineProperty 和 Proxy 的优缺点

Proxy

1. 可以直接监听整个对象, 而非是对象的某个属性

2. 可以直接监听数组的变化

3. 拦截方法丰富: 多达13种, 不限于 get、set、deleteProperty、has等。比  Object.defineProperty() 强大很多

Object.defineProperty

兼容性要比Proxy好