Vue-2.x数据双向绑定(数据劫持+ 订阅发布模式)

VUE2.x实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

所谓MVVM数据双向绑定，即主要是：数据变化更新视图，视图变化更新数据

• 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
• data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

vue数据双向绑定通过‘数据劫持’ + 订阅发布模式实现

　1.数据劫持：　　

　　　　典型的有
　　　　1.Object.defineProperty()
　　　　2.es6中Proxy对象

　　　　vue2.x使用Object.defineProperty();
　　　　vue3.x使用Proxy;

　2.订阅发布模式：

　　　　对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

　　　　订阅发布模式中事件统一由处理中心处理，订阅者发布者互不干扰

　vue中如何实现：

　　　　利用Object.defineProperty();把内部解耦为三部分
　　　　Observer: 递归的监听对象上的所有属性，当属性改变时触发对应的watcher
　　　　watcher(观察者):当数据值修改时，执行相应的回调函数，更新模板内容
　　　　dep：链接observer和watcher，每一个observer对应一个dep,内部维护一个数组，保存与该observer相关的watcher

　3.观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行