f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
---
|
|
category: Array
|
|
---
|
|
|
|
# useArrayDifference
|
|
|
|
Reactive get array difference of two arrays.
|
|
|
|
By 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.
|
|
|
|
You can pass the `symmetric` option to get the [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) of two arrays `A △ B`.
|
|
|
|
## Usage
|
|
|
|
### Use with reactive array
|
|
|
|
```ts
|
|
import { useArrayDifference } from '@vueuse/core'
|
|
|
|
const list1 = ref([0, 1, 2, 3, 4, 5])
|
|
const list2 = ref([4, 5, 6])
|
|
const result = useArrayDifference(list1, list2)
|
|
// result.value: [0, 1, 2, 3]
|
|
list2.value = [0, 1, 2]
|
|
// result.value: [3, 4, 5]
|
|
```
|
|
|
|
### Use with reactive array and use function comparison
|
|
|
|
```ts
|
|
import { useArrayDifference } from '@vueuse/core'
|
|
|
|
const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
|
|
const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
|
|
|
|
const result = useArrayDifference(list1, list2, (value, othVal) => value.id === othVal.id)
|
|
// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]
|
|
```
|
|
|
|
### Symmetric Difference
|
|
|
|
This composable also supports [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) by passing the `symmetric` option.
|
|
|
|
```ts {10}
|
|
import { useArrayDifference } from '@vueuse/core'
|
|
|
|
const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
|
|
const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
|
|
|
|
const result = useArrayDifference(
|
|
list1,
|
|
list2,
|
|
(value, othVal) => value.id === othVal.id,
|
|
{ symmetric: true }
|
|
)
|
|
// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 6 }]
|
|
```
|
|
|
|
## Type Declarations
|
|
|
|
```ts
|
|
export interface UseArrayDifferenceOptions {
|
|
/**
|
|
* Returns asymmetric difference
|
|
*
|
|
* @see https://en.wikipedia.org/wiki/Symmetric_difference
|
|
* @default false
|
|
*/
|
|
symmetric?: boolean
|
|
}
|
|
export type UseArrayDifferenceReturn<T = any> = ComputedRef<T[]>
|
|
export declare function useArrayDifference<T>(
|
|
list: MaybeRefOrGetter<T[]>,
|
|
values: MaybeRefOrGetter<T[]>,
|
|
key?: keyof T,
|
|
options?: UseArrayDifferenceOptions,
|
|
): UseArrayDifferenceReturn<T>
|
|
export declare function useArrayDifference<T>(
|
|
list: MaybeRefOrGetter<T[]>,
|
|
values: MaybeRefOrGetter<T[]>,
|
|
compareFn?: (value: T, othVal: T) => boolean,
|
|
options?: UseArrayDifferenceOptions,
|
|
): UseArrayDifferenceReturn<T>
|
|
```
|