vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

前端培训Vue 双向绑定原理

几个要点：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

前端培训Vue 双向绑定原理

具体步骤：

1. 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
   这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
2. compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
3. Watcher就是一个订阅者。用于将Observer发来的update消息处理，执行Watcher绑定的更新函数。
4. 可以说MVVM是Observer，Compile以及Watcher的“boss”了，他需要安排给Observer实现对MVVM自身model数据劫持，监听数据的属性变更，并在变动时进行notify，给Compile实现指令解析，初始化视图，并订阅数据变化，绑定好更新函数，给Watcher一方面接收Observer通过dep传递过来的数据变化，一方面通知Compile进行view update。最后，把这个MVVM抽象出来，就是vue中Vue的构造函数了，可以构造出一个vue实例。

上一篇: 大数据培训kettle安装部署
下一篇: Java培训Nginx简介