一、Object的变化侦测

1. 什么是变化侦测

• Vue.js会自动通过状态生成DOM，并将其输出到页面上显示出来，这个过程叫做渲染。Vue.js的渲染过程是声明式的，我们通过模板来描述状态与DOM之间的映射关系。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染，如果确认状态中发生了什么呢？这时候变化侦测的作用便显示出来了。
• 变化侦测分为推和拉，Angular和React中的变化侦测属于拉，即当状态发生改变时，并不知道哪个状态变了，只知道状态有可能变了，然后发送一个信号告诉框架，框架内部受到信号后，会进行一个暴力对比来找出哪些DOM节点需要重新渲染。
• Vue.js中属于推。当状态发生变化时，Vue.js会立刻知道且在一定程度知道哪些状态变了。它知道的信息越多，也便可以进行更细粒度的更新。更细粒度的更新是什么意思呢？实际上，一个状态绑定了多个依赖，当该状态改变时，会通知这些依赖（每个依赖表示一个具体的DOM节点），让它们进行更新操作。既然Vue.js知道更多的内容，它也就要付出一定的代价。粒度越细，每个状态绑定的依赖便越多，追踪依赖在内存上的开销也便会很大。故从Vue.js 2.0开始，引入了虚拟DOM，其将粒度调整为中等粒度，即一个状态绑定的不再是一个个的DOM节点，而是一个个组件。当状态发生变化时，通知依赖（即组件），组件内部再使用虚拟DOM进行对比。这可以大大降低依赖的数量，从而降低依赖追踪所消耗的内存。

2. 如何追踪变化

在js中，可以通过Object.defineProperty以及es6的proxy来侦测对象的变化。但由于proxy在浏览器支持度不是很理想，故Vue.js目前是以Object.defineProperty方式来侦测对象的变化的。

function defineReactive(data, key, val) {Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {return val},set: function(newVal) {if(val === newVal) {return;}val = newVal}})
}

使用上述defineReactive方法侦测对象data后，当data.key对应的值改变时，会触发其中的set方法，当读取data.key时，会触发get方法。由此我们也可以得知，当某一个依赖第一次读取data.key时，也便是触发get时，便可将其加入到data.key的依赖列表中，当之后data.key发生变化时,也便是触发set时，会通知其对应的所有依赖，让依赖通知其内部的DOM元素，从而能够更新DOM。那么接下来我们要做什么呢？我们需要做的便是为每一个对象的每一个属性增加一个依赖列表（dep，即Dep实例），当触发get方法时将读取该属性的依赖存放进依赖列表中，当触发set方法时，通过该依赖列表中的所有依赖。

我们使用一个Dep来封装依赖的各种行为

class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub)}//移除依赖removeSub(sub) {return this.subs.filter(item => item != sub);}//添加依赖depend() {if (window.target) {this.addSub(window.target)//window.target代表的当前正在读取该对象该属性值的依赖}}//修改时触发所有依赖notify() {const subs = this.subs.slice();subs.forEach(item => {subs[i].update() //触发每个依赖的更新方法})}
}

改变后的defineReactive方法：

function defineReactive(data, key, val) {//递归子属性if (typeof val === 'object') {new Observer(val);}let dep = new Dep();Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {dep.depend();return val},set: function(newVal) {if(val === newVal) {return;}val = newValdep.notify()}})
}class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub)}//移除依赖removeSub(sub) {return this.subs.filter(item => item != sub);}//添加依赖depend() {if (window.target) {this.addSub(window.target)//window.target代表的当前正在读取该对象该属性值的依赖}}//修改时触发所有依赖notify() {const subs = this.subs.slice();subs.forEach(item => {subs[i].update() //触发每个依赖的更新方法})}
}

我们现在已经知道该如何收集依赖并且依赖收集在哪里，但是我们一直说的依赖是谁呢？从上面代码中我们可以看到，我们要收集的依赖是window.target，那它是谁呢？我们可以将其叫为Watcher。我们可以将其理解为一个中介的角色，当数据变化时，我们可以通过它通知到其他地方。当外界读取相关属性时，会先告知其相关Watcher实例，Watcher实例去读取数据并将window.target设置为其本身，Watcher在属性的get中被收集，当属性值更新时，会通知所有读取该属性的Watcher实例，Watcher实例再通知到其可通知到的外界

class Watcher {constructor(vm, expOrFn, cb) {this.vm = vm;this.getter = parsePath(expOrFn);//expOrFn -> a.b.c (key)  返回的为该key对应的value值this.cb = cb;this.value = this.get();//读取该key对应的最初的值并返回}//此时会触发该key对应的defineReactive，便会将当前this作为window.target，存储在该key对应的依赖中get() {window.target = this;let value = this.getter.call(this.vm, this.vm) window.target = undefined;return value;}//当当前key对应的属性值改变时调用该方法update() {const oldValue = this.value;this.value = this.get();//将最新的值作为当前watcher的valuethis.cb.call(this.vm, this.value, oldValue)}
}const bailRE = /[^\w.$]/
function parsePath(path) {if(bailRE.test(path)) return;const segments = path.split('.')return function (obj) {for(let i = 0 ; i < segments.length ; i++) {if (!obj) return;obj = obj[segments[i]];}return obj;}
}

对于对象的所有属性，我们都需要将其转换为响应式的，即需要用Object.defineProperty去监听set以及get。我们采用Observer类来进行递归实现。Observer类会附加到每个被侦测的Object上。每一个Object都对应一个Observer实例。

export class Observer {constructor (value) {this.value = value;if (!Array.isArray(value)) {this.walk(value)}}/*walk会将每一个属性都转换成getter/setter的形式来侦测变化  该方法只有在数据类型为Object时被调用*/walk (obj) {const keys = Object.keys(obj);for (let i=0; i < keys.length; i++) {defineReactive(obj, keys[i], obj[keys[i]])}}
}

二、Array的变化侦测

1. Array的变化侦测和Object有什么不同?

当通过Array的各种操作方法（push、unshift、shift、pop、splice、reverse、sort）方法对数组进行操作时，无法在set中监听到，故Object的getter/setter方法就不可行了。

2. 怎么办？

我们可以通过做中间处理，当请求上述操作方法时，可以被我们监听到。可是上述方法都是Array原型上的方法，那我们该如何监听到呢？最直接的方法便是我们做一层封装，当数组对象请求上述方法时实际上请求的是我们封装的方法，我们在封装的方法中能够拦截到操作请求，我们在封装的方法中先去请求Array原型上的方法，完成正常的请求，然后再通知依赖，数组对象做了什么操作，最后依赖再去通知到其他地方。

3. 拦截器

知道了解决方法后，我们便可以得知，我们需要实现的是一个拦截器，拦截器伪造成数组对象的原型，当数组对象请求对应操作时，实际上调用的时拦截器中的方法。这样我们便可以监听到上述操作方法的请求。

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsList  = ['push', 'pop', 'unshift', 'shift', 'sort', 'splice', 'reverse']
methodsList.forEach (function (method) { //缓存原始方法const original = arrayProto[method]Object.defineProperty(arrayMethods, method, {//为arrayMethods增加上述方法value: function mutator (...args) { //当数组对象调用对应方法时，需要改变方法内部this指向，在此处我们也可以做一些其他事情，比如说发送变化通知return original.apply(this, args);},enumerable: false,writable: true,configurable:true})})

4. 怎么覆盖数组本身的方法： 将拦截器方法挂载到数组的属性上！

拦截器已经存在，那我们该如何将拦截器和数组绑定呢？答案当然是将其作为数组的原型，当通过数组调用对应方法时，调用的为拦截器上的方法。那对于有些浏览器不支持__proto__怎么办呢？Vue直接将这些方法挂载在数组上，使其称为数组的不可遍历的属性。这样的话，便可以实现了。

export class Observer {constructor (value) {this.value = value;if (Array.isArray(value)) {const augment = hasProto ? protoAugment : copyAugmentaugment(value, arrayMethods, arrayKeys)} else{this.walk(value)}}/*walk会将每一个属性都转换成getter/setter的形式来侦测变化  该方法只有在数据类型为Object时被调用*/walk (obj) {const keys = Object.keys(obj);for (let i=0; i < keys.length; i++) {defineReactive(obj, keys[i], obj[keys[i]])}}
}function protoAugment (target, src, keys) { target.__proto__ = src}function copyAugment (target, src, keys) { //将arrayMethods上的方法直接添加给数组上for (let i = 0 ; i < keys.length ; i++) {const key = keys[i];def(target, key, src[key])//给数组本身添加不可遍历的的属性}}function def (obj, key, val, enumerable) { Object.defineProperty(obj, key, {value: val,enumerable: !!enumerable,writable: true,configurable: true})}

5. 怎么收集依赖?

我们已经实现了拦截器以及拦截器已经作为数组的原型，当调用对应方法时，会调用拦截器上的方法。我们创建拦截器本质上是为了得到一种能力，一种当数组的内容发生变化时通知所有依赖的能力。那我们现在有了这个能力，又去通知谁呢?通知依赖。那么依赖怎么收集呢？

举例说明：this.arr，当我们要从this上读取arr时，一定会触发名字叫arr的属性的getter，，故数组的收集依赖是在第一次读取数组时进行的，与Object是一致的。

6. 依赖列表在哪？

我们已经知道在getter中收集依赖，那么在哪里触发呢？答案当然是在拦截器中。那依赖列表保存在哪里呢？最直观的想法应该是在getter以及拦截器都可以访问到的地方。Vue将依赖列表存放在Observer中，为什么Observer可以被getter以及拦截器访问到呢？Vue做了如下处理:

Vue将对象进行统一，当传入的val为对象时，会去判断其是否有不可枚举的属性__ob__，如果有，则返回赋值给childOb，并在setter中将依赖收集到childOb.dep上，如果没有，则创建一个Observer实例，将其作为val的__ob__，故__ob__为一个Observer实例，它也可以作为当前val已经成为响应式数据的依据。（Object类型的数据虽然也会将依赖收集到__ob__上，但是它使用的仍为defineReactive中的dep依赖集）

function defineReactive(data, key, val) {let childOb = observer(val) //如果data.key的值，即val为一个对象，则为其创建Observer实例let dep = new Dep();Object.defineProperty(data, key, {enumerable: true,configurable: true,get: function() {dep.depend();if (childOb) {childOb.dep.depend();}return val},set: function(newVal) {if(val === newVal) {return;}val = newValdep.notify()}})
}function observer (value, asRootData) {if (!isObject(value)) {//如果不是对象，则不需要创建Observer实例return}let ob;if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {//是否已经侦听过，如果侦听过，则返回已经创建好的Observer实例ob = value.__ob__;} else {ob = new Observer(value)}return ob;}

当我们在拦截器中告知所有依赖时，我们可以采用this.__ob__.dep的方式获取到依赖集。故拦截器部分被修改成下面部分：

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsList  = ['push', 'pop', 'unshift', 'shift', 'sort', 'splice', 'reverse']
methodsList.forEach (function (method) { //缓存原始方法const original = arrayProto[method]Object.defineProperty(arrayMethods, method, {//为arrayMethods增加上述方法value: function mutator (...args) { //当数组对象调用对应方法时，需要改变方法内部this指向，在此处我们也可以做一些其他事情，比如说发送变化通知const ob = this.__ob__;ob.dep.notify() //向依赖发送消息return original.apply(this, args);},enumerable: false,writable: true,configurable:true})})

7. 初始子元素如果是数组/对象怎么办？

如果当前需要被侦测的数组的子元素中存在数组/对象该怎么办？答案当然是递归侦测所有子元素。所以我们为Observer新增了observerArray方法，遍历其子元素，如果子元素也是对象/数组，则也将其变为响应式的。

 export class Observer {constructor (value) {this.value = value;this.dep = new Dep();def(value,'__ob__',this)//将当前Observer实例作为value的__ob__（不可枚举的属性）。可通过在数组数据的__ob__上拿到Observer实例，也可标识该对象是否已经被转换成了响应式数据if (Array.isArray(value)) {const augment = hasProto ? protoAugment : copyAugmentaugment(value, arrayMethods, arrayKeys)this.observerArray(value) //将数组的所有元素都变成响应式的} else{this.walk(value)}}/*walk会将每一个属性都转换成getter/setter的形式来侦测变化  该方法只有在数据类型为Object时被调用*/walk (obj) {const keys = Object.keys(obj);for (let i=0; i < keys.length; i++) {defineReactive(obj, keys[i], obj[keys[i]])}}/*侦测Array中的每一项*/observerArray (items) {for (let i = 0; o < items.length; i++) {observer(items[i])}}
}

8. 新增子元素是数组/对象怎么办？

我们是可以对某一个数组进行新增元素的，如果新增的元素是数组/对象我们也是要对其进行侦听的。那我们该怎么对其进行侦测呢？其实我们只需要对所有可以进行新增的方法进行监听，当新增的元素是数组/对象时，我们调用observerArray方法，将其转换为响应式数据。

我们将原始的拦截器修改成下述代码（def在前面已经实现），

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsList  = ['push', 'pop', 'unshift', 'shift', 'sort', 'splice', 'reverse']
const hasProto = '__proto__' in {}
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
methodsList.forEach (function (method) { //缓存原始方法const original = arrayProto[method]def(arrayMethods, method, function mutator (...args) { const result = original.apply(this, args)const ob = this.__ob__;//获取到this的__ob__，即当前数组对象let inserted;//保存新增内容switch (method) {case 'push':case 'unshift':inserted = args;break;case 'splice':inserted = args.slice(2)//splice第三个参数为新增元素，如果没有第三个参数，则代表没有在新增内容break;}if (inserted) ob.observerArray(inserted) //将新增内容转换为响应式数据ob.dep.notify();return result;})})

9. 总结：

我们首先为每个数组绑定一个Observer实例，如果数组元素也是数组，则也要为其绑定一个Observer实例，在创建Observer实例时，我们需要将数组转换为响应式数据，从而能够被Vue侦测到。除此之外，我们还需要在创建Observer实例时为数组进行拦截器设置，将拦截器对象作为数组的原型，而Array的原型作为拦截器对象的原型，这样在调用各种操作方法时，调用的为拦截器中的方法，这样的话我们便可以知晓什么时候该数组进行了更新，我们便可以通知所有依赖，从而完成更新操作。
Array的变化侦测中，依赖收集仍在setter中完成，但是是收集到各个数组绑定的Observer实例上（__ob__为数组的一个不可枚举的属性），这样的话我们可以在拦截器中，通过this.__ob__方式获取到该数组绑定的Observer实例，从而能够获取到依赖集。
除了Array原始元素要被转换为响应式数据外，新增的元素也要被转换为响应式数据，故我们需要在拦截器中对新增方法进行监听，当有新增元素时，需要通过observerArray将其转换为响应式数据。

三、VUE2.0中Object和Array变化侦测的弊端

Object变化侦测只能够侦测到数据的变化，并不能侦测到数据的增加和删除。需要通过vm.$set以及vm.$delete方法进行侦测。
Array变化侦测无法侦测到arr[0]/arr.length = 5这两种方式的操作。