由于 defineReactive 所使用的 definePrototype 对数组无法进行有效的劫持，所以当 Vue 观测到数组后将会用另一种方式实现数据的监听。

  1. if (Array.isArray(value)) {
  2.   // 判断当前环境是否有 __proto__，IE 11 以下就没有 __proto__ 
  3.   if (hasProto) {
  4.     // 正常情况下
  5.     protoAugment(value, arrayMethods)
  6.   } else {
  7.     copyAugment(value, arrayMethods, arrayKeys)
  8.   }
  9.   // 遍历并深度检测
  10.   this.observeArray(value)
  11. }
  13. // 覆盖原型链
  14. function protoAugment (target, src: Object) {
  15.   target.__proto__ = src
  16. }
  18. // 通过代理覆盖原型上的函数
  19. function copyAugment (target: Object, src: Object, keys: Array<string>) {
  20.   for (let i = 0, l = keys.length; i < l; i++) {
  21.     const key = keys[i]
  22.     def(target, key, src[key])
  23.   }
  24. }

arrayMethods

一个进行加工过的数组原型，其中有关涉及修改数组内容的函数都已被挟持，触发后会通知依赖项更新，并如有新值加入则对新值进行深度监听。

  1. const arrayProto = Array.prototype // 数组原型
  2. export const arrayMethods = Object.create(arrayProto) // 数组原型浅拷贝，在此基础上修改，防止污染全局原型链
  4. // 涉及修改数组内容的函数 key 值
  5. const methodsToPatch = [
  6.   'push',
  7.   'pop',
  8.   'shift',
  9.   'unshift',
  10.   'splice',
  11.   'sort',
  12.   'reverse'
  13. ]
  16. // 遍历上面的 key 值
  17. methodsToPatch.forEach(function (method) {
  18.   // 获取原先的函数
  19.   const original = arrayProto[method]
  20.   // 挟持这个会修改数组值的函数，分三步走
  21.   // 1. 执行该函数的原函数
  22.   // 2. 如果涉及添加新元素，则对新添加的元素进行深度检测
  23.   // 3. 通知当前值的观察者进行更新
  24.   def(arrayMethods, method, function mutator (...args) {
  25.     const result = original.apply(this, args)
  26.     const ob = this.__ob__
  27.     let inserted
  28.     switch (method) {
  29.       case 'push':
  30.       case 'unshift':
  31.         inserted = args
  32.         break
  33.       case 'splice':
  34.         inserted = args.slice(2)
  35.         break
  36.     }
  37.     if (inserted) ob.observeArray(inserted)
  38.     // notify change
  39.     ob.dep.notify()
  40.     return result
  41.   })
  42. })