7.8.数组检测

在深入剖析Vue源码 - 数据代理，关联子父组件这一节中，已经详细介绍了vue数据代理的技术是利用了Object.defineProperty,有了Object.defineProperty方法，我们可以方便的利用存取描述符中的getter/setter来进行数据的监听,在get,set钩子中分别做不同的操作，达到数据拦截的目的。然而Object.defineProperty的get,set方法只能检测到对象属性的变化，对于数组的变化(例如插入删除数组元素等操作)，Object.defineProperty却无法检测,这也是利用Object.defineProperty进行数据监控的缺陷，虽然es6中的proxy可以完美解决这一问题，但毕竟有兼容性问题，所以我们还需要研究Vue中如何对数组进行监听检测。

7.8.1 数组方法的重写

数组的改变不能再通过数据的setter方法去监听数组的变化，所以只能通过调用数组方法后对数据进行额外的处理。Vue为所有数组操作的方法重新改写了定义。

  1. var arrayProto = Array.prototype;
  2. // 新建一个继承于Array的对象
  3. var arrayMethods = Object.create(arrayProto);
  5. // 数组拥有的方法
  6. var methodsToPatch = [
  7.   'push',
  8.   'pop',
  9.   'shift',
  10.   'unshift',
  11.   'splice',
  12.   'sort',
  13.   'reverse'
  14. ];

arrayMethods是基于原始Array类为原型继承的一个对象类，因此也拥有数组的所有方法，接下来对新数组类的方法进行改写。

  1. methodsToPatch.forEach(function (method) {
  2.   // 缓冲原始数组的方法
  3.   var original = arrayProto[method];
  4.   // 利用Object.defineProperty对方法的执行进行改写
  5.   def(arrayMethods, method, function mutator () {});
  6. });
  8. function def (obj, key, val, enumerable) {
  9.     Object.defineProperty(obj, key, {
  10.       value: val,
  11.       enumerable: !!enumerable,
  12.       writable: true,
  13.       configurable: true
  14.     });
  15.   }

当调用新对象的数组方法时，会调用mutator方法,具体执行内容，我们放到数组的派发更新中介绍。

新建了一个定制化的数组类arrayMethods后,如何在调用数组方法时指向这个新的类，这是下一步的重点。

回到数据初始化，也就是initData阶段,上一篇内容花了大篇幅介绍过，数据初始化会为data数据创建一个Observer类，当时我们只讲述了Observer类会为每个非数组的属性进行数据拦截，重新定义getter,setter,而对数组的分析处理则留下来了空白。现在再回头看看对数组的处理。

  1. var Observer = function Observer (value) {
  2.   this.value = value;
  3.   this.dep = new Dep();
  4.   this.vmCount = 0;
  5.   // 将__ob__属性设置成不可枚举属性。外部无法通过遍历获取。
  6.   def(value, '__ob__', this);
  7.   // 数组处理
  8.   if (Array.isArray(value)) {
  9.     if (hasProto) {
  10.       protoAugment(value, arrayMethods);
  11.     } else {
  12.       copyAugment(value, arrayMethods, arrayKeys);
  13.     }
  14.     this.observeArray(value);
  15.   } else {
  16.   // 对象处理
  17.     this.walk(value);
  18.   }
  19. }

数组的处理会根据hasProto的判断执行protoAugment, copyAugment过程，hasProto用来判断当前环境下是否支持proto属性。

  1. var hasProto = '__proto__' in {};

当支持proto时，执行protoAugment会将当前数组的原型指向新的数组类arrayMethods,不支持proto时，则通过代理设置，在访问数组方法时代理访问新数组类中的数组方法。

  1. //直接通过原型指向的方式
  3. function protoAugment (target, src) {
  4.   target.__proto__ = src;
  5. }
  7. // 通过数据代理的方式
  8. function copyAugment (target, src, keys) {
  9.   for (var i = 0, l = keys.length; i < l; i++) {
  10.     var key = keys[i];
  11.     def(target, key, src[key]);
  12.   }
  13. }

有了这两步的处理，接下来我们在实例内部调用push, unshift等数组的方法时，会执行arrayMethods类的方法。这也是数组进行依赖收集和派发更新的核心。

7.8.2 依赖收集

由于数据初始化阶段会利用Object.definePrototype进行数据访问的改写，数组的访问同样适用，因此当访问到的数据是数组时，会被getter拦截处理，这里针对数组进行特殊处理。

  1. function defineReactive() {
  2.   ···
  3.   var childOb = !shallow && observe(val);
  5.   Object.defineProperty(obj, key, {
  6.         enumerable: true,
  7.         configurable: true,
  8.         get: function reactiveGetter () {
  9.           var value = getter ? getter.call(obj) : val;
  10.           if (Dep.target) {
  11.             dep.depend();
  12.             if (childOb) {
  13.               childOb.dep.depend();
  14.               if (Array.isArray(value)) {
  15.                 dependArray(value);
  16.               }
  17.             }
  18.           }
  19.           return value
  20.         },
  21.         set() {}
  22. }

childOb是标志属性值是否为基础类型的标志，observe遇到基本类型数据直接返回，不做任何处理，遇到对象和数组则会递归实例化Observer，最终返回Observer实例。而实例化Observer又回到之前的老流程：添加ob属性，如果遇到数组则进行原型重指向，遇到对象则定义getter,setter，这一过程前面分析过，就不再阐述。

在访问到数组时，由于childOb的存在，会执行childOb.dep.depend();进行依赖收集，该Observer实例的dep属性会收集当前的watcher作为依赖保存，这就是依赖收集的过程。

我们可以通过截图看最终依赖收集的结果。

收集前

7.8.数组检测 - 图1

收集后

7.8.数组检测 - 图2

7.8.3 派发更新

当调用数组的方法改变数组元素时，数据的setter方法是无法拦截的，所以我们唯一可以拦截的过程就是调用数组方法的时候，前面介绍过，数组方法的调用会代理到新类arrayMethods的方法中,而arrayMethods的数组方法是进行重写过的。具体我们看他的定义。

  1.  methodsToPatch.forEach(function (method) {
  2.     var original = arrayProto[method];
  3.     def(arrayMethods, method, function mutator () {
  4.       var args = [], len = arguments.length;
  5.       while ( len-- ) args[ len ] = arguments[ len ];
  6.       // 执行原数组方法
  7.       var result = original.apply(this, args);
  8.       var ob = this.__ob__;
  9.       var inserted;
  10.       switch (method) {
  11.         case 'push':
  12.         case 'unshift':
  13.           inserted = args;
  14.           break
  15.         case 'splice':
  16.           inserted = args.slice(2);
  17.           break
  18.       }
  19.       if (inserted) { ob.observeArray(inserted); }
  20.       // notify change
  21.       ob.dep.notify();
  22.       return result
  23.     });
  24.   });

mutator是重写的数组方法，首先会调用原始的数组方法进行运算，这保证了与原始数组类型的方法一致性，args保存了数组方法调用传递的参数。之后取出数组的ob也就是之前保存的Observer实例，调用ob.dep.notify();进行依赖的派发更新，前面知道了。Observer实例的dep是Dep的实例，他收集了需要监听的watcher依赖，而notify会对依赖进行重新计算并更新。具体看Dep.prototype.notify = function notify () {}函数的分析，这里也不重复赘述。

回到代码中，inserted变量用来标志数组是否是增加了元素，如果增加的元素不是原始类型，而是数组对象类型，则需要触发observeArray方法，对每个元素进行依赖收集。

总的来说。数组的改变不会触发setter进行依赖更新，所以Vue创建了一个新的数组类，重写了数组的方法，将数组方法指向了新的数组类。同时在返回到数组时依旧触发getter进行依赖收集，在更改数组时，触发数组新方法运算，并进行依赖的派发。

现在我们回过头看看Vue的官方文档对于数组检测时的注意事项：

Vue 不能检测以下数组的变动当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength

有了上诉的分析，数组的这些设置方式确实不会触发派发更新的过程。