平时开发中，Vue的响应式系统让我们不再去操作DOM，只需关心数据逻辑的处理，极大地降低了代码的复杂度。而响应式系统也是Vue的核心，作为开发者有必要了解其实现原理！
简易版
以watch为切入点
watch是平时开发中使用率非常高的功能，其目的是观测一个数据，当数据变化时执行我们预先定义的回调。使用方式如下：
{ watch: { obj(val, oldVal) { console.log(val, oldVal); } } }
上面观测了Vue实例的obj属性，当其值发生变化时，打印出新值与旧值。
因此，我们定义一个watch函数：
function watch (data, key, cb) { // do something }
watch函数接收3个属性，分别是
data: 被观测对象 key: 被观测的属性
cb: 数据变化后要执行的回调
Object.defineProperty
既然要在数据变化后再执行回调，所以需要知道数据是什么时候被修改的，这就是Object.defineProperty的作用，其为数据定义了访问器属性。在数据被读取时会触发get，在数据被修改时会触发set。
我们定义一个defineReactive函数，其用来将一个数据变成响应式的：
function defineReactive(data, key) { let val = data[key]; Object.defineProperty(data, key, { configurable: true, enumerable: true, get: function() { return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; } }); }
defineReactive函数为data对象的key属性定义了get、set，get返回属性key的值val，set中修改key的值为新值newVal。到目前为止，key属性还是没有什么特殊之处。
数据被修改会触发set，那cb一定是在set中被执行。但set与cb之间好像并没有什么联系，所以我们来搭建一座桥梁，来构建两者的联系：
let target = null;
我们在全局定义了一个target变量，它用来保存cb的值，然后在set中调用。所以，cb什么时候被保存在target中？回到出发点，我们要调用watch函数来观测data的key属性，当值被修改时执行我们定义的回调cb，这就是cb被保存在target中的时机了：
function watch(data, key, cb) { target = cb; }
watch函数中target被修改了，但我要是再想调用watch函数一次，也就是说我想在data[key]被修改时，执行两个不同的回调，又或者说，我想再观测data的其它属性，那该怎么办？必须得在target被再次修改前，将其值保存到别处。因为，target是同个属性的不同回调或不同属性的回调所共有的。
我们有必要为key属性建立一个私有的仓库，来保存回调。其实defineReactive函数有一点特殊地方：函数内部定义了一个val变量，然后在get和set函数都使用了val变量，这形成一个闭包，defineReactive函数的作用域是key属性私有的，这就是天然的私有仓库了：
function defineReactive(data, key) { let val = data[key]; const dep = []; Object.defineProperty(data, key, { configurable: true, enumerable: true, get: function() { target && dep.push(target); return val; }, set: function(newVal) { if (newVal === val) { return; } dep.forEach(fn => fn(newVal, val)); val = newVal; } }); }
我们在defineReactive函数内定义了一个数组dep，其保存着每个属性key的回调集合，也称为依赖集合。在get函数中将依赖收集到dep中，在set函数中循环dep执行每一个依赖。总结起来就是：在get中收集依赖，set中触发依赖。
既然是在get中收集依赖，那就要想办法在tatget被修改时候触发get，所以我们在watch函数中读取一下属性key的值：
function watch(data, key, cb) { target = cb; data[key]; target = null; }
接下来我们测试下代码：
完全ok!
依赖
回想简易版中，我们一共提到3个角色：defineReactive、dep、watch，三者其实各司其职，但我们把三者代码耦合在了一起，不方便接下来扩展与理解，所以我们来做一下归类。
Watcher
观察者，也称为依赖，它的职责就是订阅一个数据，当数据发生变化时，做些什么：
class Watcher { constructor(data, key, cb) { this.vm = data; this.key = key; this.cb = cb; this.value = this.get(); } get() { Dep.target = this; const value = this.vm[this.key]; Dep.target = null; return value; } update() { const oldValue = this.value; this.value = this.vm[this.key]; this.cb.call(this.vm, this.value, oldVal); } }
首先在构造函数中读取了属性key的值，这会触发属性key的set，然后将自己作为依赖存入其dep数组中。当然，在读取属性值之前，需要将自己赋值给桥梁Dep.target，这是get方法所做的事。最后是update方法，这是当订阅的数据发生变化后，需要被执行的，其主要目的就是要执行cb，因为cd需要变化后的新值作为参数，所以要再一次读取属性值。
Dep
Dep的职责就是构建属性key与依赖Watcher之间的联系，其实例一定有一个独一无二的属于属性key的依赖收集框：