VUE双向数据绑定

Vue2.x中利用数据劫持和发布订阅者模式实现双向数据绑定。

数据劫持中最重要的部分就是Object.defineProperty()方法，该方法接受三个参数，第一个参数是对象名称，第二个是属性名称，第三个是属性修改方法（对象中包含多个方法）

当某一对象中某一属性值被使用时，会调用get方法

当某一对象中某一属性值被修改时，会调用set方法

 具体实现过程：

1.设置一个监听器observer，对数据对象进行遍历，并给每个属性添加get、set方法。

2.设置一个解析器compile，把模板中的变量替换成数据，初始化视图，为与数据双向绑定有关的节点生成一个订阅者 watcher，watcher 会将自己添加到消息订阅器dep 容器中。

view层到model层

通过addEventListener添加事件，改变model层数据

model层到view层

当监听器observe中观察到数据变化时，通知消息订阅器dep,通过dep.notice()通知各个订阅者 watcher，订阅者 watcher调用自身的update()方法，更新视图。

当我们在实例化一个Vue时，一方面设置监听器Observer监听数据，另一方面利用解析器Compile解析页面，进行初始化工作。

观察者watcher充当监听器和解析器之间的桥梁。

---

1. Vue 2.x 利用 Object.defineProperty()，并且把内部解耦为 Observer, Dep, 并使用 Watcher 相连
2. Vue 在 3.x 版本之后改用 Proxy 进行实现

---

发布订阅者模式

发布订阅者模式就是一种一对多的依赖关系。多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这个数据对象发生变化的时候会执行一个发布事件，通过这个发布事件会通知到所有的订阅者，使它们能够自己改变对数据对象依赖的部分状态。

 优点

1.耦合性低

2.便于代码的维护