useArrayUnique

分类

数组

导出大小

236 B

最近更改

5 天前

响应式唯一数组

用法

与多个 refs 的数组一起使用

import { useArrayUnique } from '@vueuse/core'

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]

与响应式数组一起使用

import { useArrayUnique } from '@vueuse/core'

const list = reactive([1, 2, 2, 3])
const result = useArrayUnique(list)
// result.value: [1, 2, 3]

list.push(1)
// result.value: [1, 2, 3]

与自定义函数一起使用

import { useArrayUnique } from '@vueuse/core'

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' }]

类型声明

/**
 * reactive unique array
 * @see https://vueuse.org.cn/useArrayUnique
 * @param list - the array was called upon.
 * @param compareFn
 * @returns A computed ref that returns a unique array of items.
 */
export declare function useArrayUnique<T>(
  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
  compareFn?: (a: T, b: T, array: T[]) => boolean,
): ComputedRef<T[]>

源码

Source • Docs

贡献者

Anthony Fu

丶远方

Anthony Fu

IlyaL

更新日志

v12.8.0 on 3/5/2025

7432f - feat(types): 弃用 MaybeRef 和 MaybeRefOrGetter，赞成 Vue 的原生方法 (#4636)

v12.3.0 on 1/2/2025

59f75 - feat(toValue): 弃用来自 @vueuse/shared 的 toValue，赞成 Vue 的原生方法

v12.0.0-beta.1 on 11/21/2024

0a9ed - feat!: 移除 Vue 2 支持，优化捆绑包并清理代码 (#4349)

v10.0.0-beta.4 on 4/13/2023

4d757 - feat(types)!: 将 MaybeComputedRef 重命名为 MaybeRefOrGetter

0a72b - feat(toValue): 将 resolveUnref 重命名为 toValue

v10.0.0-beta.2 on 3/28/2023

c8c30 - feat: 添加自定义函数以进行去重 (#2612)