vue2.0数据双向绑定原理

数据绑定：

一旦更新了data中的某个属性数据，界面上所有直接/间接使用了此属性的节点都会更新。

数据劫持

1. 数据劫持是vue2.0中实现数据绑定的一种技术；
2. 基本思想：通过Object.defineProperty()来监听data中所有属性（任意层次）数据的变化，并通过订阅-发布者模式，一旦数据变化就去更新界面。

四个重要对象

1. Observer监听器，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2. Watcher订阅者，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3. Compile解析器，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
4. Dep消息订阅器，主要负责收集订阅者，然后在属性变化的时候通知对应的订阅者。

Vue2.0数据双向绑定原理-图解

参考:

• https://juejin.cn/post/6844904162786820109
• https://github.com/febobo/web-interview/issues/2
• https://juejin.cn/post/6844903942254510087#heading-9
• https://juejin.cn/post/6978728619782701087