Vue 是如何实现数据双向绑定的？

数据双向绑定是指什么？

从单向绑定

通过 JavaScript 控制 DOM 的展示，就是数据（Data）到模板（DOM）的绑定，这就是数据单向绑定。

到双向绑定

而双向绑定就是在这个基础上，又扩展了反向的绑定效果，就是模板到数据的绑定。

我们将与单向绑定的区别是，数据与模板是相互影响的，一方发生变化，另一方立即做出更新。

双向绑定的构成

上面的例子中，我们看到双向绑定涉及到的“模板”和“数据”，这二者是双向绑定的核心要素 

双向绑定的原理

 双向绑定在框架中的作用

因为 Vue 是数据双向绑定的框架，而整个框架的由三个部分组成：

数据层（Model）：应用的数据及业务逻辑，数据变化会自动的展示到页面中。
视图层（View）：应用的展示效果，数据也会自动的反应到Model上；
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来，就是View与Model的桥梁；

ViewModel ：主要是指：数据变化更新视图，视图变化更新数据

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

其中，View 变化更新 Data ，可以通过事件监听的方式来实现

1.监听器（Observer）：观察数据，做到时刻清楚数据的任何变化，然后通知视图更新；
2、解析器（Compiler）：观察UI，做到时刻清楚视图发生的一切交互，然后更新数据

 数据绑定是如何实现的？

        Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

1、实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。并且可以拿到最新值通知订阅者。

2、实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

3、实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

4、实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。