场景:在列表中,有这么一个属性,需要通过同行的其他属性,进行复杂的计算,才能得出,如果我们用方法,然后传参,得到这个属性,那么每次更改列表后,每行都会重新计算,耗费性能。如果我们有一个可缓存的方法,在参数没有改变的时候,返回之前得到的缓存结果。只有在参数改变的时候,重新计算。
我们可以构建一个工具函数,将计算函数作为参数,会返回一个带缓存的函数。如下 useComputed.js:
// useComputed.js
import { computed } from "vue";
export function useComputed(fn) {
const cache = new Map();
function getCache(args) {
return cache.get(JSON.stringify(args));
}
return function (...args) {
const cacheResult = getCache(args);
if (cacheResult) {
return cacheResult;
}
const result = computed(() => fn(...args));
cache.set(JSON.stringify(args), result);
return result;
};
}
使用:
<template> {{ computedPrice(row) }} </template>
<script setup>
import { useComputed } from "./useComputed.js";
function totalPrice(row) {
return row.price * row.count;
}
const computedPrice = useComputed(totalPrice);
</script>