当前位置： 首页 > news >正文

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

news 2025/8/21 6:59:08

概览

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 implementforEach(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 requiredlastIndexOf(...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 trackingsome(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)，返回结果。

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

辅助方法数组方法功能特点
iterator``
entries()
values()		创建响应式迭代器
自动深度转换元素为响应式
reactiveReadArrayconcat()
join()
toReversed()
toSorted()
toSpliced()		安全读取数组
处理深度响应式转换
返回完全响应式的新数组
applyevery()
filter()
find()
findIndex()
findLast()
findLastIndex()
forEach()
map()
some()		通用函数应用模板
按需深度转换结果
自动进行依赖收集
可自定义结果处理逻辑
searchProxyincludes()
indexOf()
lastIndexOf()		安全搜索处理
避免深层代理比较错误
收集依赖但不修改数据
noTrackingpop()
push()
shift()
splice()
unshift()		绕过响应式系统
直接操作原始数组
不触发依赖收集
用于突变操作方法
reducereduce()
reduceRight()		专用降维处理器
特殊处理累计值逻辑
在响应式系统控制下操作

重写的方法

  • 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 对象的完整分析，根据内部使用的核心辅助方法进行分类总结：

方法名称使用的辅助方法特殊处理响应式行为
[Symbol.iterator]iterator使用 toReactive 转换每个元素✅ 迭代时自动转换响应式
concatreactiveReadArray递归处理嵌套数组✅ 返回深度响应式的新数组
entriesiterator转换值为响应式 value[1] = toReactive(value[1])✅ 返回键值对的响应式迭代器
everyapply无特殊转换⚠️ 依赖收集但不修改源数组
filterapply结果数组元素使用 v => v.map(toReactive) 转换✅ 返回过滤后的响应式新数组
findapply找到的元素用 toReactive 转换⚠️ 单个元素响应式转换
findIndexapply无特殊转换⚠️ 纯数值返回
findLastapply找到的元素用 toReactive 转换⚠️ 单个元素响应式转换
findLastIndexapply无特殊转换⚠️ 纯数值返回
forEachapply无特殊转换⚠️ 仅遍历不做转换
includessearchProxy自定义搜索处理⚠️ 不触发深层响应式，但收集依赖
indexOfsearchProxy自定义搜索处理⚠️ 不触发深层响应式，但收集依赖
joinreactiveReadArray直接调用原始方法⚠️ 返回字符串不响应
lastIndexOfsearchProxy自定义搜索处理⚠️ 不触发深层响应式，但收集依赖
mapapply无特殊转换⚠️ 返回非响应式数组
popnoTracking修改操作🛑 禁止依赖收集，直接修改
pushnoTracking修改操作🛑 禁止依赖收集，直接修改
reducereduce专用降维处理⚠️ 收集依赖但不自动转换值
reduceRightreduce专用降维处理⚠️ 收集依赖但不自动转换值
shiftnoTracking修改操作🛑 禁止依赖收集，直接修改
someapply无特殊转换⚠️ 依赖收集但不修改源数组
splicenoTracking修改操作🛑 禁止依赖收集，直接修改
toReversedreactiveReadArray直接调用 ES2023 新方法✅ 返回反向的响应式新数组
toSortedreactiveReadArray直接调用 ES2023 新方法✅ 返回排序后的响应式新数组
toSplicedreactiveReadArray直接调用 ES2023 新方法✅ 返回裁剪后的响应式新数组
unshiftnoTracking修改操作🛑 禁止依赖收集，直接修改
valuesiterator使用 toReactive 转换每个元素✅ 返回元素的响应式迭代器

辅助方法功能说明

辅助方法用途响应式处理特点
iterator创建数组迭代器✅ 自动转换元素为响应式 (toReactive)
reactiveReadArray安全读取数组（见前文分析）✅ 自动处理深层响应式转换
apply通用方法应用（在函数调用前后执行依赖跟踪）⚠️ 仅自动收集依赖，不处理结果转换（除非指定回调）
searchProxy处理数组搜索方法（indexOf/includes 等）⚠️ 避免深层代理干扰比较逻辑
reduce专用降维方法处理器⚠️ 特殊处理累计值逻辑
noTracking禁止依赖收集的修改操作🛑 完全绕过响应式系统执行原始操作
http://www.dtcms.com/a/340388.html

相关文章：

  • 解决前端项目启动时找不到esm文件的问题
  • 微算法科技（NASDAQ: MLGO）引入高级区块链DSR算法：重塑区块链网络安全新范式
  • AI时代SEO关键词优化新策略
  • 设计模式1-单例模式
  • 梯度提升决策树（GBDT）：从原理到实战，掌握结构化数据建模的核心利器
  • Python入门第13课：数据可视化入门，用Matplotlib绘制你的第一张图表
  • Java 线程池ThreadPoolExecutor源码解读
  • 算法 ----- 链式
  • Day 30 模块和库导入
  • mapbox高阶，结合threejs（threebox）添加建筑glb模型，添加阴影效果，设置阴影颜色和透明度
  • 力扣 30 天 JavaScript 挑战 第36天 第8题笔记 深入了解reduce，this
  • CorrectNav——基于VLM构建带“自我纠正飞轮”的VLN：通过视觉输入和语言指令预测导航动作，且从动作和感知层面生成自我修正数据
  • 【Linux】系统部分——磁盘存储结构与文件系统
  • C++八股 —— 设计模式
  • wpf之ComboBox
  • DRF序列化器
  • DeepSeek V3.1 完整评测分析：2025年AI编程新标杆
  • ⭐CVPR2025 给3D高斯穿 “UV 衣” 框架[特殊字符]
  • 路由器NAT的类型测定
  • KubeBlocks AI：AI时代的云原生数据库运维探索
  • Redux 核心概念详解
  • Flutter开发 json_serializable json数据解析
  • 关联规则挖掘2：FP-growth算法（Frequent Pattern Growth，频繁模式增长）
  • rsync + inotify 数据实时同步
  • Android 入门到实战（三）：ViewPager及ViewPager2多页面布局
  • 性能测试报告深度解析：从冰冷数据到火热洞察
  • android kernel代码 common-android13-5.15 下载 编译
  • Linux系统：C语言进程间通信信号(Signal)
  • RK3576赋能无人机巡检：多路视频+AI识别引领智能化变革
  • deque的原理与实现（了解即可）