前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载导读useArrayUnique是 VueUse 中用于处理响应式数组去重的核心组合式函数它基于 Vue 3 的computed与toValue构建能够对由 ref、响应式数组或 getter 函数组成的列表进行实时去重并在数据变化时自动更新结果。本文将以 useArrayUnique 官方文档 为主体结合其源码实现与单元测试完整讲解三种典型用法多 ref 数组、响应式数组、自定义比较函数及其底层原理帮助你在 Vue 3 项目中快速落地数据去重场景。什么是 useArrayUniqueuseArrayUnique属于 VueUseshared包中 Array数组分类下的工具函数。它接收一个可能包含 ref / getter 的数组或整个是 ref / getter 的数组返回一个ComputedRefT[]——即一个计算属性 ref。只要输入数组或其内部元素发生变化去重结果就会自动重新计算并更新。从导出入口可以看到它与其他数组工具如useArrayDifference、useArrayMap等一同从vueuse/core对外导出因此你可以直接通过vueuse/core包引入使用import { useArrayUnique } from vueuse/core其完整类型签名如下摘自源码export type UseArrayUniqueReturnT any ComputedRefT[] export function useArrayUniqueT( list: MaybeRefOrGetterMaybeRefOrGetterT[], compareFn?: (a: T, b: T, array: T[]) boolean, ): UseArrayUniqueReturnT参数说明参数类型说明listMaybeRefOrGetterMaybeRefOrGetterT[]要执行去重的数组。既可以是普通数组、ref 包裹的数组也可以是返回数组的 getter 函数数组元素本身也可以是 ref / getter调用时会被自动解包compareFn(a: T, b: T, array: T[]) boolean| 可选自定义比较函数用于判断两个元素是否“相等”。不传时使用基于Set的严格相等去重返回值ComputedRefT[]去重后的计算属性数组用法一多个 ref 组成的数组当你的数据源是一组相互独立的 ref 时useArrayUnique会对每个元素调用toValue解包后再去重并且对每一个 ref 的变化都保持响应import { useArrayUnique } from vueuse/core import { ref } from vue const item1 ref(0) const item2 ref(1) const item3 ref(1) const item4 ref(2) const item5 ref(3) const list [item1, item2, item3, item4, item5] const result useArrayUnique(list) // result.value: [0, 1, 2, 3] item5.value 1 // result.value: [0, 1, 2]在上面的示例中初始数组[0, 1, 1, 2, 3]中有两个1去重后得到[0, 1, 2, 3]当item5从3改为1后数组中1出现三次去重结果更新为[0, 1, 2]。整个过程无需手动触发更新result.value始终与源数据保持同步。用法二整个响应式数组list参数也可以是reactive数组或ref包裹的数组去重结果同样自动响应push、splice等数组变更import { useArrayUnique } from vueuse/core import { reactive } from vue const list reactive([1, 2, 2, 3]) const result useArrayUnique(list) // result.value: [1, 2, 3] list.push(1) // result.value: [1, 2, 3]这里reactive([1, 2, 2, 3])去重后得到[1, 2, 3]随后push(1)添加了一个已存在的元素结果仍保持[1, 2, 3]说明去重是持续有效的而不是一次性的静态计算。对应地单元测试 中的should work with ref array用例也验证了ref([1, 2, 2, 3])场景初始长度为 3push(1)后长度仍为 3。用法三自定义比较函数去重对象对于对象数组默认的严格相等比较无法识别“id 相同但内容不同”的元素此时可以传入自定义的compareFnimport { useArrayUnique } from vueuse/core import { reactive } from vue const list reactive([ { id: 1, name: foo }, { id: 2, name: bar }, { id: 1, name: baz }, ]) const result useArrayUnique(list, (a, b) a.id b.id) // result.value: [{ id: 1, name: foo }, { id: 2, name: bar }] list.push({ id: 1, name: qux }) // result.value: [{ id: 1, name: foo }, { id: 2, name: bar }]按id相等去重后id为 1 的三条记录只保留第一个出现的{ id: 1, name: foo }即使再push一条id: 1的新记录结果也不会变化。这正是从源码中的uniqueElementsBy实现可以推断出的行为去重遵循“保留首次出现元素”的策略。源码剖析去重是怎么实现的useArrayUnique的核心实现位于 packages/shared/useArrayUnique/index.ts整体逻辑非常精简function uniqT(array: T[]) { return Array.from(new Set(array)) } function uniqueElementsByT( array: T[], fn: (a: T, b: T, array: T[]) boolean, ) { return array.reduceT[]((acc, v) { if (!acc.some(x fn(v, x, array))) acc.push(v) return acc }, []) } export function useArrayUniqueT( list: MaybeRefOrGetterMaybeRefOrGetterT[], compareFn?: (a: T, b: T, array: T[]) boolean, ): UseArrayUniqueReturnT { return computedT[](() { const resolvedList toValue(list).map(element toValue(element)) return compareFn ? uniqueElementsBy(resolvedList, compareFn) : uniq(resolvedList) }) }这条实现链路可以拆解为三个关键点双重toValue解包toValue(list)负责解包最外层的 ref / getter随后.map(element toValue(element))再对数组中的每一个元素执行toValue。这就是为什么既支持整个数组是 ref也支持数组元素是 ref / getter。基于Set的默认去重uniq借助Array.from(new Set(array))完成去重。Set基于严格相等SameValueZero语义因此1与1会被视为不同元素NaN也能被正确处理。该实现的时间复杂度为 O(n)。基于reducesome的自定义去重uniqueElementsBy遍历数组通过acc.some(x fn(v, x, array))判断当前元素是否与已收集结果中的某个元素“相等”不等则push进结果。注意compareFn的第三个参数是整个原始数组array这意味着你的比较函数可以访问完整的源数据上下文。此实现为 O(n²)适用于元素较少但需要按字段如id比较的场景。整个函数体被包裹在computed中因此它没有任何副作用源码标注了__NO_SIDE_EFFECTS__每次依赖变化时才会惰性重算且不产生多余的内存开销。该函数的压缩后体积约为 217 B见 packages/export-size.json非常轻量。测试验证与行为边界packages/shared/useArrayUnique/index.test.ts 使用 Vitest 对四种行为进行了验证可作为理解其语义边界的权威参考should work with array of refs用shallowRef构造[0, 1, 1, 2, 3]去重后长度为 4将item5改为2后长度为 3——验证了多 ref 场景的响应式去重。should work with ref arraydeepRef([1, 2, 2, 3])去重后长度为 3push(1)后长度仍为 3——验证了 ref 包裹数组场景。should work with array of reactive and custom compare function对reactive对象数组按id去重长度为 2——验证了自定义比较函数场景。should be defined确认 API 正常导出。从测试与源码可以归纳出以下几点使用注意事项默认去重只针对“值”而非“引用结构”对象默认不会被深度去重只有同一个引用或严格相等的原始值才会被合并需要按字段去重时务必提供compareFn。保留首次出现的元素自定义比较场景下重复项中排在最前面的元素会被保留后续出现的会被丢弃。结果不可直接赋值修改返回的是ComputedRef应通过读取.value使用修改源数组才是正确的数据驱动方式。复杂度提示默认Set实现为 O(n)自定义比较为 O(n²)当数组规模很大且需要自定义比较时建议评估性能影响。与相关数组工具的搭配useArrayUnique只是 VueUse Array 分类下的工具之一在实际业务中常与同类响应式数组工具搭配使用例如useArrayDifference求两个数组的差集支持symmetric选项计算对称差useArrayMap/useArrayFilter/useArrayFind响应式地执行映射、过滤与查找useArrayIncludes/useArrayEvery/useArraySome响应式地进行包含与逻辑判断。一个典型的组合场景是先用useArrayMap提取对象列表的某个字段再用useArrayUnique得到去重后的字段枚举值如渲染下拉选项或者先用useArrayDifference找出新增项再与useArrayUnique合并维护一个不重复的已选项集合。这些函数共享MaybeRefOrGetter输入与ComputedRef输出的统一设计可以无缝串联。总结useArrayUnique以极简的代码实现了响应式数组去重的全部能力默认Set去重、双重toValue解包、可选的自定义比较函数以及基于computed的自动更新。无论是处理多 ref 列表、reactive数组还是按对象字段去重它都能以声明式的方式保持结果与源数据同步是 Vue 3 项目中处理去重逻辑时值得优先选择的方案。赞分享前端【免费下载链接】vueuseCollection of essential Vue Composition Utilities for Vue 3项目地址https://gitcode.com/gh_mirrors/vu/vueuse点击查看免费下载相关推荐airi 项目中的 useArrayUnique 实战指南VueUse 响应式数组去重 Composable 的用法与原理airi 项目中的 useArrayUnique 实战指南VueUse 响应式数组去重 Composable 的用法与原理 本篇技术指南聚焦 VueUse 的AI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染在 Vue 3 项目中使用 useArrayFilter 实现响应式数组过滤VueUse 响应式 Array.filter 深度实战在 Vue 3 项目中使用 useArrayFilter 实现响应式数组过滤VueUse 响应式 Array.filter 深度实战 useArrayFiltAI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染Langfuse LLM 可观测性多语言支持指南4 份文档、1 行 i18n 配置一次讲清Langfuse LLM 可观测性多语言支持指南4 份文档、1 行 i18n 配置一次讲清 周一早上一位日本协作工程师私聊你Langfuse 有没有日文前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考