函数缓存

1. 是什么？怎么实现？

函数缓存，就是将函数运算过的结果进行缓存。

本质上就是用空间（缓存存储）换时间（计算过程）。常用于缓存数据计算结果和缓存对象。

实现函数缓存主要依靠闭包、柯里化、高阶函数。

// 简单实现：memoize
function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const add = (a, b) => a + b;
const cachedAdd = memoize(add);
cachedAdd(1, 2); // 3（计算）
cachedAdd(1, 2); // 3（命中缓存）

2. 使用场景

  • 计算昂贵、纯函数：如斐波那契、阶乘、加解密、复杂格式化等。
  • 接口幂等请求：把相同参数的 HTTP 请求结果缓存到内存，避免重复请求。
  • React/Vue 渲染优化：useMemo / computed 等底层就是函数缓存思想。

补充：使用缓存时的注意事项：

  • 缓存键的设计：引用类型要用稳定序列化（JSON.stringify、structuredClone）或自定义 hash，避免不同对象键冲突。
  • 内存占用：缓存无界会内存泄漏，需要 LRU 淘汰、定时清理或 Map 配合容量限制。
  • 闭包陷阱：缓存对象常驻内存，意味着闭包依赖的变量也会被一并保留，需关注内存释放。
  • 参数数量：变长参数要正确处理（如 ...args 后取 JSON.stringify）。

来源整理自：vue3js.cn 面试官系列