Vue3源码reactivity响应式篇之数组代理的方法

概览

vue3中对于普通的代理包含对象和数组两类，对于数组的方法是重写了许多方法，具体实现参见packages\reactivity\src\arrayInstrumentations.ts

arrayInstrumentations实际上就是一个对象，对象的属性就是数组的方法，属性值就是重写的方法。

在BaseReactiveHandler类的get(target,key,receiver)方法中，有如下代码：

get(target, key, receiver) {
  /**省略 */
   const targetIsArray = shared.isArray(target);
    if (!isReadonly2) {
      let fn;
      if (targetIsArray && (fn = arrayInstrumentations[key])) {
        return fn;
      }
      if (key === "hasOwnProperty") {
        return hasOwnProperty;
      }
    }
  /**省略 */
}

可知，当对响应式对象target进行读取操作时，会判断target是否为数组，且是否key是否是arrayInstrumentations中实现的方法，若是，则调用Reflect.get读取arrayInstrumentations中实现的方法并返回。

源码分析

arrayInstrumentations中实现的方法有：concat, entries, every, filter, find, findIndex, findLast, findLastIndex, forEach, includes, indexOf, join, lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, sort, splice, unshift等

arrayInstrumentations的实现如下：

const arrayInstrumentations = {
  __proto__: null,
  // 可迭代方法
  [Symbol.iterator]() {
    return iterator(this, Symbol.iterator, toReactive);
  },
  concat(...args) {
    return reactiveReadArray(this).concat(
      ...args.map((x) => isArray(x) ? reactiveReadArray(x) : x)
    );
  },
  entries() {
    return iterator(this, "entries", (value) => {
      value[1] = toReactive(value[1]);
      return value;
    });
  },
  every(fn, thisArg) {
    return apply(this, "every", fn, thisArg, void 0, arguments);
  },
  filter(fn, thisArg) {
    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
  },
  find(fn, thisArg) {
    return apply(this, "find", fn, thisArg, toReactive, arguments);
  },
  findIndex(fn, thisArg) {
    return apply(this, "findIndex", fn, thisArg, void 0, arguments);
  },
  findLast(fn, thisArg) {
    return apply(this, "findLast", fn, thisArg, toReactive, arguments);
  },
  findLastIndex(fn, thisArg) {
    return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
  },
  // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
  forEach(fn, thisArg) {
    return apply(this, "forEach", fn, thisArg, void 0, arguments);
  },
  includes(...args) {
    return searchProxy(this, "includes", args);
  },
  indexOf(...args) {
    return searchProxy(this, "indexOf", args);
  },
  join(separator) {
    return reactiveReadArray(this).join(separator);
  },
  // keys() iterator only reads `length`, no optimisation required
  lastIndexOf(...args) {
    return searchProxy(this, "lastIndexOf", args);
  },
  map(fn, thisArg) {
    return apply(this, "map", fn, thisArg, void 0, arguments);
  },
  pop() {
    return noTracking(this, "pop");
  },
  push(...args) {
    return noTracking(this, "push", args);
  },
  reduce(fn, ...args) {
    return reduce(this, "reduce", fn, args);
  },
  reduceRight(fn, ...args) {
    return reduce(this, "reduceRight", fn, args);
  },
  shift() {
    return noTracking(this, "shift");
  },
  // slice could use ARRAY_ITERATE but also seems to beg for range tracking
  some(fn, thisArg) {
    return apply(this, "some", fn, thisArg, void 0, arguments);
  },
  splice(...args) {
    return noTracking(this, "splice", args);
  },
  toReversed() {
    return reactiveReadArray(this).toReversed();
  },
  toSorted(comparer) {
    return reactiveReadArray(this).toSorted(comparer);
  },
  toSpliced(...args) {
    return reactiveReadArray(this).toSpliced(...args);
  },
  unshift(...args) {
    return noTracking(this, "unshift", args);
  },
  values() {
    return iterator(this, "values", toReactive);
  }
};

辅助方法

arrayInstrumentations是一个可迭代对象，实现了Symbol.iterator方法，在了解arrayInstrumentations之前，我们先了解下如下几个个函数：reactiveReadArray、shallowReadArray、iterator、apply、searchProxy、noTracking和reduce的实现。

reactiveReadArray

reactiveReadArray用于处理响应式数组的读取操作，它的实现如下：

function reactiveReadArray(array) {
  const raw = toRaw(array);
  if (raw === array) return raw;
  track(raw, "iterate", ARRAY_ITERATE_KEY);
  return isShallow(array) ? raw : raw.map(toReactive);
}

若数组是普通数组，则直接返回数组array，否则调用track进行依赖收集，iterate表示进行的是迭代操作的依赖收集,即当使用for...of、map、forEach等迭代方法时建立依赖关系。最后分析，若响应式数组是浅响应，则返回原始数组，否则遍历原始数组调用toReactive克隆数组

shallowReadArray

shallowReadArray用于浅层响应式数组的读取操作，其实现如下：

function shallowReadArray(arr) {
  // 先将数组转为普通数组
  track(arr = toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
  return arr;
}

iterator

iterator用于处理数组的迭代操作，比如数组的values、entries等方法，其实现如下：

function iterator(self, method, wrapValue) {
  // arr 是shallowReadArray返回的普通数组
  const arr = shallowReadArray(self);
  const iter = arr[method]();
  // 当self是深层响应式数组时，需要对迭代器的next方法进行包装
  if (arr !== self && !isShallow(self)) {
    iter._next = iter.next;
    iter.next = () => {
      const result = iter._next();
      if (result.value) {
        // 对迭代器的next方法进行包装，当调用next方法时，会调用wrapValue函数对值进行包装
        result.value = wrapValue(result.value);
      }
      return result;
    };
  }
  return iter;
}

iterator的三个参数分别表示：self数组本身、method迭代方法、wrapValue包装值的函数。在调用values、entries等方法时会调用它。

apply

apply用于处理数组的方法调用，比如数组的map、filter等方法，其实现如下：

function apply(self, method, fn, thisArg, wrappedRetFn, args) {
  const arr = shallowReadArray(self);
  const needsWrap = arr !== self && !isShallow(self);
  const methodFn = arr[method];
  if (methodFn !== arrayProto[method]) {
    const result2 = methodFn.apply(self, args);
    return needsWrap ? toReactive(result2) : result2;
  }
  let wrappedFn = fn;
  if (arr !== self) {
    if (needsWrap) {
      wrappedFn = function(item, index) {
        return fn.call(this, toReactive(item), index, self);
      };
    } else if (fn.length > 2) {
      wrappedFn = function(item, index) {
        return fn.call(this, item, index, self);
      };
    }
  }
  const result = methodFn.call(arr, wrappedFn, thisArg);
  return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
}

apply方法接收6个参数，分别表示：self数组本身、method数组方法、fn回调函数、thisArg回调函数的this值、wrappedRetFn包装返回值的函数、args回调函数的参数数组。

apply方法的实现逻辑如下：

1. 调用shallowReadArray方法将数组转为普通数组
2. 判断是否需要包装，若数组不是普通数组，并且是深层响应式数组，则需要包装，记为needsWrap
3. 判断数组方法method是否是数组的原生方法。若不是，则调用自定义方法，并且返回该结果；根据needsWrap判断是否需要包装返回值
4. 若数组方法method是数组的原生方法，则先判断数组是否是响应式数组，若是，则调用call方法执行原生方法arr[method]，参数为fn和thisArg；最后判断，若needsWrap为true且wrappedReFn存在，则调用wrapped包装结果再返回，否则直接返回。
5. 若数组方法method是数组原生方法，且数组是响应式数组，则需要对传入的fn进行封装一层；若数组是深层响应式数组，即needsWrap为true需要包装，则需要通过toReactive方法对数组项进行响应式化，否则判断fn形参长度大于2，则调用call方法，传入this、item、index、self。
6. 最后步骤同*（4）* ，不同的是wrappedFn不同。

searchProxy

searchProxy用于处理数组的includes、indexOf、lastIndexOf方法，其实现如下：

function searchProxy(self, method, args) {
  const arr = toRaw(self);
  track(arr, "iterate", ARRAY_ITERATE_KEY);
  const res = arr[method](...args);
  if ((res === -1 || res === false) && isProxy(args[0])) {
    args[0] = toRaw(args[0]);
    return arr[method](...args);
  }
  return res;
}

searchProxy方法会先调用toRaw将响应式数组转为普通数组，然后调用track收集依赖，然后调用数组的原生方法arr[method](...args)，若没找到,则判断参数是否是代理对象，若是代理对象，则调用toRaw将代理对象转为普通对象，最后再次调用数组的原生方法arr[method](...args)，返回结果。若找到了或者参数不是代理对象，则直接返回res

noTracking

noTracking的实现如下：

function noTracking(self, method, args = []) {
  pauseTracking();
  startBatch();
  const res = toRaw(self)[method].apply(self, args);
  endBatch();
  resetTracking();
  return res;
}

noTracking方法的实现逻辑如下：

1. 调用pauseTracking方法暂停依赖收集
2. 调用startBatch方法开启批量更新
3. 调用toRaw方法将响应式数组转为普通数组，然后调用数组的原生方法arr[method].apply(self, args)，返回结果
4. 调用endBatch方法结束批量更新
5. 调用resetTracking方法重置依赖收集
6. 返回结果

reduce

reduce方法用于对数组中的元素进行迭代执行fn，上次的执行结果作为下次执行的参数，返回最后的结果。其实现如下：

function reduce(self, method, fn, args) {
  const arr = shallowReadArray(self);
  let wrappedFn = fn;
  if (arr !== self) {
    if (!isShallow(self)) {
      wrappedFn = function(acc, item, index) {
        return fn.call(this, acc, toReactive(item), index, self);
      };
    } else if (fn.length > 3) {
      wrappedFn = function(acc, item, index) {
        return fn.call(this, acc, item, index, self);
      };
    }
  }
  return arr[method](wrappedFn, ...args);
}

对于数组target先判断它是不是普通数组，若是，则调用数组的原生方法arr[method](wrappedFn, ...args)，返回结果；若不是普通数组，则继续判断是否是浅层响应式，若不是，则调用fn.call，传参时用toReactive将数据进行响应式处理；若是浅层响应式，则判断fn的形参个数是否大于3，若是则包装下fn；最后调用arr[method](wrappedFn,...args)，返回结果。

辅助方法与重写方法的关联

重写的方法

• concat(...args)

用于合并数组，返回一个新的响应式数组，不改变原数组。其实现就是先调用reactiveArray进行依赖收集，再遍历入参数数组，若数组项是数组，则继续调用reactiveArray收集依赖；否则不做处理，最后再调用数组的原生方法concat合并处理过后的参数数组。

• entries

entries是一个迭代器方法，用于返回数组的键值对迭代器，每个迭代项是一个包含键和值的数组。vue3对entries的值进行了包装

• every

every方法用于判断数组中的所有元素是否满足条件，若所有元素都满足条件，则返回true，否则返回false。有一个不满足就会返回false。属于数组的原生方法。

• filter

filter方法用于过滤数组中的元素，返回一个新的数组，新数组中的元素是满足条件的元素。若数组为空，则返回空数组。也是属于数组的原生方法。

filter方法也是基于apply实现的，不同的是第五个参数wrappedRetFn会将最后的数组结果转为响应式。

• find

find方法用于查找数组中的第一个满足条件的元素，若找到则返回该元素，否则返回undefined。属于数组的原生方法。若找到元素，则调用toReactive方法对元素进行响应式化。

• findLast

和find作用一样，不过findLast是从数组末尾开始查找；find是从数组开头开始查找。

• findIndex、**findLastIndex**都用用于查找元素索引，因此无需响应式化结果

• forEach

forEach方法用于遍历数组中的每个元素，没有不返回值。属于数组的原生方法。

• includes、indexOf、lastIndexOf用于判断数组是否包含指定元素，基于searchProxy方法实现。

• join

join方法用于将数组中的所有元素转换为字符串，返回一个新的字符串。若数组为空，则返回空字符串。属于数组的原生方法。

vue3中重写join方法是基于reactiveReadArray方法实现，解决了深层响应式数组的join调用

• map

map方法用于遍历数组中的每个元素，返回一个新的数组，新数组中的元素是遍历函数的返回值。若数组为空，则返回空数组。属于数组的原生方法。

• pop、push、shift、unshift、splice

如上几个方法会可能改变原数组的长度，为了避免数组的长度变化触发监听，因此暂停依赖的收集，它们是基于noTracking方法实现。

• reduce、reduceRight

这两个方法就是基于辅助方法reduce实现的，根据数组的响应式特性决定如何包装fn。
reduce是从数组的开头进行迭代执行fn，reduceRight是从数组的末尾进行迭代执行fn。

• toReversed、toSorted和toSpliced
  这三个方法都是基于reactiveReadArray实现，并且它们是ES2023新增的特性，属于数组的原生方法。

总结

以下是针对 Vue 3 响应式系统中 arrayInstrumentations 对象的完整分析，根据内部使用的核心辅助方法进行分类总结：

辅助方法功能说明