useArrayMap
响应式 Array.map。
用法
与多个 ref 组成的数组一起使用
ts
import { useArrayMap } from '@vueuse/core'
const item1 = ref(0)
const item2 = ref(2)
const item3 = ref(4)
const item4 = ref(6)
const item5 = ref(8)
const list = [item1, item2, item3, item4, item5]
const result = useArrayMap(list, i => i * 2)
// result.value: [0, 4, 8, 12, 16]
item1.value = 1
// result.value: [2, 4, 8, 12, 16]与响应式数组一起使用
ts
import { useArrayMap } from '@vueuse/core'
const list = ref([0, 1, 2, 3, 4])
const result = useArrayMap(list, i => i * 2)
// result.value: [0, 2, 4, 6, 8]
list.value.pop()
// result.value: [0, 2, 4, 6]类型声明
ts
export type UseArrayMapReturn<T = any> = ComputedRef<T[]>
/**
* 响应式 `Array.map`
*
* @see https://vueuse.org/useArrayMap
* @param list - 被调用的数组。
* @param fn - 对给定 `list` 的每个元素调用的函数。每次 `fn` 执行时，返回的值都会添加到新数组中。
*
* @returns 一个新数组，其中每个元素都是回调函数的结果。
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useArrayMap<T, U = T>(
list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
fn: (element: T, index: number, array: T[]) => U,
): UseArrayMapReturn<U>源码
贡献者
一纸忘忧
Anthony Fu
Anthony Fu
SerKo
Robin
IlyaL
Young
plylrnsdy
Levi (Nguyễn Lương Huy)
Levi (Nguyễn Lương Huy)