vue3 中可缓存的方法

yqcoder2024-06-01 12:04

场景：在列表中，有这么一个属性，需要通过同行的其他属性，进行复杂的计算，才能得出，如果我们用方法，然后传参，得到这个属性，那么每次更改列表后，每行都会重新计算，耗费性能。如果我们有一个可缓存的方法，在参数没有改变的时候，返回之前得到的缓存结果。只有在参数改变的时候，重新计算。

我们可以构建一个工具函数，将计算函数作为参数，会返回一个带缓存的函数。如下 useComputed.js:

javascript 复制代码

// 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;
  };
}

使用：

html 复制代码

<template> {{ computedPrice(row) }} </template>

<script setup>
  import { useComputed } from "./useComputed.js";

  function totalPrice(row) {
    return row.price * row.count;
  }

  const computedPrice = useComputed(totalPrice);
</script>