useArrayUnique

Category

陣列

匯出大小

236 B

Last Changed

5 days ago

reactive unique array

Usage

Use with array of multiple refs

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]

Use with reactive array

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]

Use with custom function

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

Type Declarations

/**
 * reactive unique array
 * @see https://vueuse.dev.org.tw/useArrayUnique
 * @param list - the array was called upon.
 * @param compareFn
 * @returns A computed ref that returns a unique array of items.
 */
export declare function useArrayUnique<T>(
  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
  compareFn?: (a: T, b: T, array: T[]) => boolean,
): ComputedRef<T[]>

Source

原始碼 • 文件

貢獻者

Anthony Fu

丶遠方

Anthony Fu

IlyaL

變更日誌

v12.8.0 於 2025/3/5

7432f - feat(types): 棄用 MaybeRef 和 MaybeRefOrGetter，改用 Vue 原生方法 (#4636)

v12.3.0 於 2025/1/2

59f75 - feat(toValue): 棄用 @vueuse/shared 的 toValue，改用 Vue 原生方法

v12.0.0-beta.1 於 2024/11/21

0a9ed - feat!: 移除 Vue 2 支援、最佳化 bundles 並清理程式碼 (#4349)

v10.0.0-beta.4 於 2023/4/13

4d757 - feat(types)!: 將 MaybeComputedRef 重新命名為 MaybeRefOrGetter

0a72b - feat(toValue): 將 resolveUnref 重新命名為 toValue

v10.0.0-beta.2 於 2023/3/28

c8c30 - feat: 新增自訂函式以進行去重複 (#2612)