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

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

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据

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

实现⼀个数据监听器 Observer： 对数据对象进⾏遍历，能够对数据对象的所有属性进行监听，利⽤ Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。并通知订阅者

实现⼀个指令解析器 Compile： 对每个元素节点的指令进行扫描和解析，根据指令模板将模板中的变量都替换成数据，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，⼀旦数据有变动，收到通知，调⽤更新函数进⾏数据更新。

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

实现⼀个订阅器 Dep： 订阅器采⽤ 发布-订阅 设计模式，⽤来收集订阅者Watcher，对监听器 Observer 和 订阅者 Watcher 进⾏统⼀管理

总结
个人理解：
在new Vue的时候，在 Observer 中通过 Object.defineProperty() 达到数据劫持，代理所有数据的 getter 和 setter 属性，在每次触发 setter 的时候，都会通过 Dep 来通知Watcher，Watcher 作为Observer数据监听器与Compile模板解析器之间的桥梁，当 Observer 监听到数据发生改变的时候，通过 Updater 来通知 Compile 更新视图，而 Compile 通过 Watcher 订阅对应数据，绑定更新函数，通过 Dep 来添加订阅者，达到双向绑定。