1---
2category: Array
3---
4 
5# useArrayUnique
6 
7reactive unique array
8 
9## Usage
10 
11### Use with array of multiple refs
12 
13```ts
14import { useArrayUnique } from '@vueuse/core'
15 
16const item1 = ref(0)
17const item2 = ref(1)
18const item3 = ref(1)
19const item4 = ref(2)
20const item5 = ref(3)
21const list = [item1, item2, item3, item4, item5]
22const result = useArrayUnique(list)
23// result.value: [0, 1, 2, 3]
24item5.value = 1
25// result.value: [0, 1, 2]
26```
27 
28### Use with reactive array
29 
30```ts
31import { useArrayUnique } from '@vueuse/core'
32 
33const list = reactive([1, 2, 2, 3])
34const result = useArrayUnique(list)
35// result.value: [1, 2, 3]
36 
37list.push(1)
38// result.value: [1, 2, 3]
39```
40 
41### Use with custom function
42 
43```ts
44import { useArrayUnique } from '@vueuse/core'
45 
46const list = reactive([
47  { id: 1, name: 'foo' },
48  { id: 2, name: 'bar' },
49  { id: 1, name: 'baz' },
50])
51 
52const result = useArrayUnique(list, (a, b) => a.id === b.id)
53// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
54 
55list.push({ id: 1, name: 'qux' })
56// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
57```
58 
59## Type Declarations
60 
61```ts
62export type UseArrayUniqueReturn<T = any> = ComputedRef<T[]>
63/**
64 * reactive unique array
65 * @see https://vueuse.org/useArrayUnique
66 * @param list - the array was called upon.
67 * @param compareFn
68 * @returns A computed ref that returns a unique array of items.
69 *
70 * @__NO_SIDE_EFFECTS__
71 */
72export declare function useArrayUnique<T>(
73  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
74  compareFn?: (a: T, b: T, array: T[]) => boolean,
75): UseArrayUniqueReturn<T>
76```
77