1---
2category: Array
3---
4 
5# useArrayDifference
6 
7Reactive get array difference of two arrays.
8 
9By default, it returns the difference of the first array from the second array, so call `A \ B`, [Relative Complement](<https://en.wikipedia.org/wiki/Complement_(set_theory)>) of B in A.
10 
11You can pass the `symmetric` option to get the [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) of two arrays `A △ B`.
12 
13## Usage
14 
15### Use with reactive array
16 
17```ts
18import { useArrayDifference } from '@vueuse/core'
19 
20const list1 = ref([0, 1, 2, 3, 4, 5])
21const list2 = ref([4, 5, 6])
22const result = useArrayDifference(list1, list2)
23// result.value: [0, 1, 2, 3]
24list2.value = [0, 1, 2]
25// result.value: [3, 4, 5]
26```
27 
28### Use with reactive array and use function comparison
29 
30```ts
31import { useArrayDifference } from '@vueuse/core'
32 
33const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
34const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
35 
36const result = useArrayDifference(list1, list2, (value, othVal) => value.id === othVal.id)
37// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]
38```
39 
40### Symmetric Difference
41 
42This composable also supports [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) by passing the `symmetric` option.
43 
44```ts {10}
45import { useArrayDifference } from '@vueuse/core'
46 
47const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
48const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
49 
50const result = useArrayDifference(
51  list1,
52  list2,
53  (value, othVal) => value.id === othVal.id,
54  { symmetric: true }
55)
56// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 6 }]
57```
58 
59## Type Declarations
60 
61```ts
62export interface UseArrayDifferenceOptions {
63  /**
64   * Returns asymmetric difference
65   *
66   * @see https://en.wikipedia.org/wiki/Symmetric_difference
67   * @default false
68   */
69  symmetric?: boolean
70}
71export type UseArrayDifferenceReturn<T = any> = ComputedRef<T[]>
72export declare function useArrayDifference<T>(
73  list: MaybeRefOrGetter<T[]>,
74  values: MaybeRefOrGetter<T[]>,
75  key?: keyof T,
76  options?: UseArrayDifferenceOptions,
77): UseArrayDifferenceReturn<T>
78export declare function useArrayDifference<T>(
79  list: MaybeRefOrGetter<T[]>,
80  values: MaybeRefOrGetter<T[]>,
81  compareFn?: (value: T, othVal: T) => boolean,
82  options?: UseArrayDifferenceOptions,
83): UseArrayDifferenceReturn<T>
84```
85