Skip to content

useArray

响应式数组的响应式操作方法集合。

说明

该 hook 目前为占位状态,后续将提供 useArrayMapuseArrayFilteruseArrayFind 等响应式数组操作方法。

计划 API

ts
// 响应式 map
function useArrayMap<T, U>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number, array: T[]) => U,
): ComputedRef<U[]>

// 响应式 filter
function useArrayFilter<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number, array: T[]) => boolean,
): ComputedRef<T[]>

// 响应式 find
function useArrayFind<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number, array: T[]) => boolean,
): ComputedRef<T | undefined>

// 响应式 reduce
function useArrayReduce<T, U>(
  list: MaybeRefOrGetter<T[]>,
  reducer: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U,
  initialValue: MaybeRefOrGetter<U>,
): ComputedRef<U>

代码示例(预期用法)

ts
import { ref } from 'vue'
import { useArrayMap, useArrayFilter } from 'ljf-hooks'

const list = ref([1, 2, 3, 4, 5])

const doubled = useArrayMap(list, (item) => item * 2)
// doubled.value => [2, 4, 6, 8, 10]

const evens = useArrayFilter(list, (item) => item % 2 === 0)
// evens.value => [2, 4]

list.value.push(6)
// doubled 和 evens 自动更新