Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.3 KiB

Raw Blame History

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 of B in A.

You can pass the symmetric option to get the Symmetric difference of two arrays A △ B.

Usage

Use with reactive array

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

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 by passing the symmetric option.

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

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>;

2.3 KiB Raw Blame History