可传参的计算属性hook封装

问题

工作中有些场景需要为计算属性传参，但是计算属性是个无参函数，如果直接使用函数，会导致函数重复调用，所以我们首先想到计算属性，好的，开始百度

百度到的答案

const xx = computed(() => (obj: {a: number, b:number}) => {
    return a + b
})

百度到的答案结果

会导致函数重复调用，还是自己写吧

useComputeds hook

import { computed } from "vue"

export const useComputeds = (fn: any) => {
    const computedMaps = new Map()

    return (...args: any) => {
        const key = JSON.stringify(args)
        if(computedMaps.has(key)) {
            return computedMaps.get(key)
        } else {
            const result = computed(() => fn(...args))
            computedMaps.set(key, result)
            return result
        }
    }
}

还可以简化一下

import { computed } from "vue"

export const useComputeds = (fn: any) => {
    const computedMaps = new Map()
    return (...args: any) => {
        const key = JSON.stringify(args)
        return computedMaps.has(key) ? computedMaps.get(key):
            computedMaps.set(key, computed(() => fn(...args))).get(key)
    }
}