vue数据双向绑定的原理?

通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息,触发响应的监听回调.

第一步:通过observe的数据对象进行递归遍历,包括子属性对象的属性,都加上setter,getter,然后给这个对象的某个值赋值,就会触发setter,就能监听到数据的变化,

第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据右边,立即更新.

第三步:watcher订阅者是observe和compile之间通信的桥梁.主要做的事情是:

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

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

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

第四步:mvvm作为数据绑定的入口,整合observe,compile和watcher三者,通过observe来监听自己的model数据变化,通过compile来解析编译模板,最终利用watcher塔起observe和compile之间的通信桥梁,达到数据变化>视图更新>视图交互变化>数据model变更的双向绑定效果