vue源码系列-深入响应式原理数组变异方法

前言

上一篇文章 深入响应式原理Vue.set 我们学习了 Vue.set 的实现原理，在此基础上我们再来学习下 vue 中数组变异方法

为什么无法监听数组

我们知道 vue 是利用 Object.defineProperty 来实现监听的，为什么说无法监听数组呢？是因为 Object.defineProperty 的原因么

其实 Object.defineProperty 是可以监听数组元素的

const arr = []

Object.defineProperty(arr, 0, {
  get (a) {
    console.log('arr[0] get')
    return 0
  },

  set (a) {
    console.log('arr[0] set')
    console.log(a)
  }
});

arr[0] // arr[0] get
arr[0] = 1 // arr[0] set

那为啥说无法监听数组呢？其实是因为以下几点

1. 我们虽然可以监听 arr[0] = 1 这种赋值，但是无法监听方法 arr.push(1) 这样的赋值方式

2. 因为数组的长度是不固定的，假如当前数组长度为 1，我们设置 arr[1] = 2 添加了元素，因为没有监听索引 1，所以说无法监听后期添加的元素

3. 最主要的障碍在于无法监听数组长度， Object.defineProperty(deep, 'length') 是不行的，所以通过监听 length 来为添加的索引进行监听这条路行不通

所以虽然 Object.defineProperty 可以监听数组元素，但是因为数组的灵活性带来的一系列问题不好解决，Vue 也就没去通过劫持数组元素的方式来实现响应式。（PS：以后谁再说数组是无法劫持的，要不要跳起来打他）

vue是如何处理数组的

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 为value添加__ob__指向实例
    def(value, '__ob__', this)
    // 如果是数组则执行以下
    if (Array.isArray(value)) {
      // 为数组添加变异方法
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      // 实际将遍历数组执行 new Observer()
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  // ...
}

可以看出的是，对于对象是会执行 walk 函数遍历属性执行 defineReactive 来为属性建立监听的。而对于数组并不会执行 walk 进行索引监听。但是会执行 observeArray 遍历数组元素递归元素值的监听。

所以有这样一个结论，vue 监听了对象属性，但是对于数组是直接跳过的，不会进行索引监听。

数组变异方法

我们接着再来看 vue 中的数组变异方法是如何实现的。在上面的代码有这样一段

if (hasProto) {
  protoAugment(value, arrayMethods)
} else {
  copyAugment(value, arrayMethods, arrayKeys)
}

这里的 protoAugment 和 copyAugment 其实都比较简单，就是为数组添加方法 arrayMethods

protoAugment 和 copyAugment

function protoAugment (target, src: Object) {
  target.__proto__ = src
}

function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}

arrayMethods

arrayMethods 的实现在 src/core/observer/array.js 中，其内容是我们今天学习的重点

import { def } from '../util/index'

// 用数组原型对象创建新对象并返回
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 数组方法数组哈哈
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  // 这边重写了几个数组方法，其实就是执行原方法，并且添加了一些额外的操作
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    // 只有push unshift splice 会插入新值
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 监听新值
    if (inserted) ob.observeArray(inserted)
    // notify change
    // 这里注意 ob.dep.notify() 其实和 Vue.set 响应的原理是一样的
    ob.dep.notify()
    return result
  })
})

源码很好理解，从 Array.prototype 中继承了数组方法，再对数组方法进行重写，在新方法中实际调用原型方法并添加额外功能。这也就是变异方法 push, pop, shift, unshift, splice, sort, reverse 的实现原理及其能够通知变化的原因了。

最佳实践

今天的源码比较简单，但我们可以从中学习到一些实践（PS:基于本人理解）

不污染全局

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

从 Array 的原型中继承方法，而不是通过重写 Array.prototype 来实现功能，这样很好地实现需求又不污染全局

总结

本篇分析了 vue 的数组变异方法的实现，比较简单，大家通过源码自己都能看明白。希望大家 good good staduy day day up