1 Vue 的基础 —— getter/setter
同样是实现了双向绑定，但 Vue 使用的方法与 Angular 却完全不同。Vue 的文档中是这样描述的：
把一个普通对象传给 Vue 实例作为它的
data选项，Vue.js 将遍历它的属性，用Object.defineProperty将它们转为 getter/setter。这是 ES5 特性，不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。
getter/setter 使得开发者有机会在对象属性取值和赋值的时候进行自定义操作，响应系统便是基于这个特性实现的。
2 Watcher
Watcher 是 Vue 核心。每个 Watcher 都拥有一个自己的表达式，Watcher 的作用就是维护这个表达式依赖的数据项，并在数据项更新的时候更新表达式的值。 其实从 Vue 的实现来讲，Watcher 应该被叫做 Listener 或 Subscriber 更加合适。
模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。
不单单是模板中的指令和数据绑定，计算属性也是由 Watcher 来实现的，可以说 Vue 中 Watcher 无处不在。
3 依赖收集
Watcher 和数据项之间的依赖关系是一个多对多的关系，即一个 Watcher 可以依赖多个数据项，一个数据项也可以被多个 Watcher 依赖。那么问题就来了：Vue 是怎样管理 Watcher 和数据项之间的依赖关系的呢？答案就是 依赖收集。
依赖收集是通过 property 的 getter 完成的，依赖收集的过程涉及到 Vue 的三类对象：Watcher、Dep 和 Observer。其中 Observer 负责将数据项转化为响应式对象，而 Dep 则用来描述 Watcher 和 Observer 的依赖关系。
Vue 中，每个 Observer 对应一个 Dep 对象，而每个 Dep 对象可以对应多个 Watcher，每个 Watcher 也可以对应多个 Dep 对象，从而实现了多对多的依赖关系。
搞清楚了三类对象，下面就来看看依赖关系到底是怎样建立起来的：
- Vue 实例初始化的过程中，首先，每个数据项都会生成一个 Observer，每个 Observer 又会初始化一个 Dep 实例；
- 接下来，模板中的每个指令和数据绑定都会生成一个 Watcher 实例，实例化的过程中，会计算这个 Watcher 对应表达式的值；
- 计算开始之前，Watcher 会设置 Dep 的静态属性
Dep.target指向其自身，开始依赖收集； - 计算表达式的过程中，该 Watcher 依赖的数据项会被访问，从而触发其 getter 中的代码；
- 数据项 getter 中会判断
Dep.target是否存在，若存在则将自身的 Dep 实例保存到 Watcher 的列表中，并在此 Dep 实例中注册 Watcher 为订阅者； - 重复上述过程直至 Watcher 计算结束，
Dep.target被清除，依赖收集完成；
在依赖关系建立后，每当数据项发生变化（setter 被访问），Observer 会调用其 Dep 实例的 notify 方法，在这个 Dep 实例中注册的 Watcher 将会被通知，并重新进行计算及依赖收集的过程，然后执行相应的回调函数。以上就是完成响应的整个过程。
4 计算属性与 Lazy Watcher
前面说到，不仅是模板中的指令和数据，Vue 中的计算属性同样是一个 Watcher。不同的是，计算属性依赖的是一个 Lazy Watcher。
Lazy Watcher 与普通 Watcher 最大的不同在于：依赖发生变化后，Lazy Watcher 不会马上计算表达式的新值，而是在 Watcher 下次被访问时才进行计算。