useArrayUnique

分类

数组

导出大小

219 B

上次更改

3 个月前

响应式唯一数组

用法

与多个 ref 组成的数组一起使用

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

类型声明

export type UseArrayUniqueReturn
<T
 = any> = ComputedRef
<T
[]>
/**
 * 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.
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useArrayUnique
<T
>(
  list
: MaybeRefOrGetter
<MaybeRefOrGetter
<T
>[]>,
  compareFn
?: (a
: T
, b
: T
, array
: T
[]) => boolean,
): UseArrayUniqueReturn
<T
>