Appearance
useArray
响应式数组的响应式操作方法集合。
说明
该 hook 目前为占位状态,后续将提供 useArrayMap、useArrayFilter、useArrayFind 等响应式数组操作方法。
计划 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 自动更新