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 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之前,我们先了解下如下几个个函数:reactiveReadArrayshallowReadArrayiteratorapplysearchProxynoTrackingreduce的实现。

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...ofmapforEach等迭代方法时建立依赖关系。最后分析,若响应式数组是浅响应,则返回原始数组,否则遍历原始数组调用toReactive克隆数组

shallowReadArray

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

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

iterator用于处理数组的迭代操作,比如数组的valuesentries等方法,其实现如下:

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包装值的函数。在调用valuesentries等方法时会调用它。

apply

apply用于处理数组的方法调用,比如数组的mapfilter等方法,其实现如下:

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],参数为fnthisArg;最后判断,若needsWraptruewrappedReFn存在,则调用wrapped包装结果再返回,否则直接返回。
  5. 若数组方法method是数组原生方法,且数组是响应式数组,则需要对传入的fn进行封装一层;若数组是深层响应式数组,即needsWraptrue需要包装,则需要通过toReactive方法对数组项进行响应式化,否则判断fn形参长度大于2,则调用call方法,传入thisitemindexself
  6. 最后步骤同*(4)* ,不同的是wrappedFn不同。
searchProxy

searchProxy用于处理数组的includesindexOflastIndexOf方法,其实现如下:

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方法用于遍历数组中的每个元素,没有不返回值。属于数组的原生方法。

  • includesindexOflastIndexOf用于判断数组是否包含指定元素,基于searchProxy方法实现。

  • join

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

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

  • map

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

  • poppushshiftunshiftsplice

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

  • reducereduceRight

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

  • toReversedtoSortedtoSpliced
    这三个方法都是基于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.pswp.cn/web/94240.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/94240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何玩转K8s:从入门到实战

一、K8S介绍及部署 1 应用的部署方式演变 部署应用程序的方式上,主要经历了三个阶段: 传统部署:互联网早期,会直接将应用程序部署在物理机上 优点:简单,不需要其它技术的参与 缺点:不能为应用…

综合测验:配置主dns,dhcp,虚拟主机,nfs文件共享等

综合实验(所有设备关闭防火墙和selinux)在appsrv上部署主dns,为example.com提供域名解析 安装bind bind-chroot rootappsrv ~]# yum install bind bind-chroot -y编辑主配置文件,全局配置文件,正向解析文件 [rootappsrv ~]# vim /etc/named.c…

MySQL数据库管理与索引优化全攻略

一、表管理1.建库语法:create database if not exists 数据库名;命名规则:仅可使用数字、字母、下划线、不能纯数字;区分字母大小写;具有唯一性;不可使用MySQL命令或特殊字符。相关命令:show databases; …

基于大模型构建 Java 混淆的方式方法(从入门到精通 · 含开源实践)

1. 目标与威胁模型:你到底想防什么? 把“混淆”当作成本叠加器:让逆向者付出更多时间与技能,而不影响用户体验与可维护性。可用 Collberg 等提出的四指标来权衡:有效性/韧性/隐蔽性/成本(potency/resilience/stealth/cost)。近年的研究也在重审这些评估方法,建议结合可…

RabbitMQ面试精讲 Day 28:Docker与Kubernetes部署实践

【RabbitMQ面试精讲 Day 28】Docker与Kubernetes部署实践 在微服务架构日益普及的今天,消息中间件RabbitMQ已成为解耦系统、异步通信的核心组件。随着云原生技术的成熟,如何在Docker与Kubernetes(K8s)环境中高效、高可用地部署Ra…

神经网络和深度学习介绍

目录 1.深度学习的介绍 2.神经网络的构造 ①神经元结构 ②神经网络组成 ③权重核心性 3.神经网络的本质 4.感知器 单层感知器的局限性: 5.多层感知器 多层感知器的优势: 6.偏置 7.神经网络的设计 8.损失函数 常用的损失函数: 9…

云原生俱乐部-k8s知识点归纳(8)

这一部分主要讲一讲CRD客户资源定义、Gateway API、Priority Class优先类、HPA自动扩缩这四部分内容。还剩下Argo CD的内容了整个k8s,至于operator的话单独有一本书,都是实战内容。CRD客户资源定义先来讲一讲这节内容的几个核心术语,Custom R…

【机器学习】7.随机森林之数学原理

随机森林(Random Forest)的数学原理核心是“决策树基学习器 Bootstrap抽样 特征随机选择” 的集成框架,通过降低单棵决策树的方差、提升模型泛化能力来工作。以下分步骤解析其数学推导与核心逻辑: 一、 基学习器:决策…

大模型微调面试题全解析:从概念到实战

大模型微调面试题全解析&#xff1a;从概念到实战 微调基础概念 本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型开发 学习视频/籽料/面试题 都在这>>Github<< >>gitee<< &#xff08;一&#xff09;什么是微调 微调&#xf…

Linux: network: arp: arp_accept

文章目录 接收 linux 代码 arp协议的处理 接收 arp_accept - BOOLEAN Define behavior for gratuitous ARP frames who’s IP is not already present in the ARP table: 0 - don’t create new entries in the ARP table 1 - create new entries in the ARP table Both repli…

SpringBoot 整合 Langchain4j RAG 技术深度使用解析

目录 一、前言 二、Langchain4j RAG介绍 2.1 什么是LangChain4j 2.2 LangChain4j RAG技术介绍 2.2.1 RAG技术原理 2.2.2 LangChain4j中的RAG实现 2.2.3 LangChain4j RAG技术优势 2.2.4 LangChain4j RAG技术应用场景 三、LangChain4j RAG 技术深度使用 3.1 文档加载与解…

百度深度学习面试:batch_size的选择问题

题目在深度学习中&#xff0c;为什么batch_size设置为1不好&#xff1f;为什么batch_size设为整个数据集的大小也不好&#xff1f;&#xff08;假设服务器显存足够&#xff09;解答这是一个非常核心的深度学习超参数问题。即使显存足够&#xff0c;选择极端的 batch_size 也通常…

AWS Fargate 完全指南:在无服务器容器中释放应用潜能

容器化技术带来了应用交付的革命,但管理运行容器的底层服务器集群却带来了新的复杂性。如何在不牺牲容器灵活性的前提下,摆脱服务器的运维重负? AWS Fargate 应运而生。它是一款为容器打造的无服务器计算引擎,让您能够专注于构建应用程序,而无需管理服务器。本文将带您深…

WSL Ubuntu数据迁移

将 WSL 中的 Ubuntu 迁移到其他磁盘可有效释放 C 盘空间并优化系统性能。以下是详细步骤及注意事项&#xff1a;&#x1f4cd; ​​迁移步骤​​​​备份 WSL 数据&#xff08;防止意外丢失&#xff09;​​以管理员身份打开 PowerShell 或命令提示符。导出 Ubuntu 实例为压缩包…

基于STM32的病房监测系统/环境监测系统/人体健康监测系统

基于STM32的病房监测系统/环境监测系统/人体健康监测系统 持续更新&#xff0c;欢迎关注!!! 基于STM32的病房监测系统/环境监测系统/人体健康监测系统 随着科技的进步与人们健康意识的提升&#xff0c;环境与人体健康监测的需求日益增长。在医疗、居住和工作环境中&#xff0c…

【适合中小企业应用的Flask网站部署指南】【小白指南系列】如何在Windows Server服务器上部署Flask网站和SSL证书开启HTTPS

【适合中小企业应用的Flask网站部署指南】【小白指南系列】如何在Windows Server服务器上部署Flask网站和SSL证书开启HTTPS 前言&#xff1a; 上一篇文章已经配置好Redis数据库和网站雏形建立了。现在完善了一个比较重大的功能和进度之后&#xff0c;我们尝试初步将Flask项目网…

std::exchange详解

一、基本概念与函数原型 std::exchange 是 C++14 引入的标准库函数,定义于 <utility> 头文件。其核心功能是原子性地替换对象的值并返回旧值,适用于资源管理、状态机更新等场景。 函数原型: template <class T, class U = T> T exchange(T& obj,

kubernetes-dashboard使用http不登录

安装了k8s v1.28&#xff0c;想要安装kubernetes-dashboard以便可视化管理平台&#xff0c;网上很多资料都是版本比较低的&#xff0c;自己摸索了很久&#xff0c;终于搞定了。直接上配置文件&#xff0c;拿去kubectl apply -f k8s-dashb.yml就行了。 # Copyright 2017 The Kub…

道路车道线分割数据集左车道右车道中线labelme格式3494张4类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件)图片数量(jpg文件个数)&#xff1a;3494标注数量(json文件个数)&#xff1a;3494标注类别数&#xff1a;4标注类别名称:["center_lane","right_lane","…

12.Shell脚本修炼手册--函数的基础认知与实战演练(fock炸弹!!)

Shell 函数的知识与实践 文章目录Shell 函数的知识与实践Shell 函数介绍Shell 函数的语法Shell 函数的执行1. 不带参数的函数执行2. 带参数的函数执行Shell 函数的基础实践示例 1&#xff1a;简单的 hello 函数&#xff08;验证 “先定义后调用”&#xff09;示例 2&#xff1a…