如何利用 Map 对象做局部缓存？减少计算属性重复运算的性能小技巧-Vue.js-PHP中文网

用map做局部缓存的核心是“按需存储+键值映射+避免重复计算”，因其支持任意类型key、插入顺序遍历、内置size/clear/has等方法，比普通对象更适配计算属性中以参数对象为key的场景。

如何利用 map 对象做局部缓存？减少计算属性重复运算的性能小技巧

用 Map 做局部缓存，核心是“按需存储 + 键值映射 + 避免重复计算”，尤其适合计算属性中依赖动态参数、但实际输入组合有限的场景。

为什么不用普通对象而选 Map？

Map 支持任意类型作 key（比如对象、函数、Symbol），而普通对象只能用字符串或 Symbol；Map 的键值对顺序与插入顺序一致，遍历更可预测；Map 提供 size 属性和 clear()、has() 等方法，操作更直观。计算属性里常要拿整个参数对象当 key，这时 Map 是更自然的选择。

在计算属性中封装缓存逻辑

把耗时计算包裹进一个带 Map 缓存的函数，每次先查缓存，命中则直接返回，未命中则执行计算并存入 Map。注意 key 要能唯一标识输入——常用 JSON.stringify(params)（仅限纯 JSON 数据），或用 createCacheKey(...args) 手动拼接（推荐用于含函数、Date、RegExp 等不可序列化值的场景）。

缓存 key 尽量扁平：避免用整个大型响应式对象，提取关键字段构造 key
控制缓存生命周期：不需要长期保留时，可在组件卸载或数据重置时调用 map.clear()
谨慎共享 Map 实例：多个计算属性共用一个 Map 时，key 设计必须全局唯一，否则可能误命中

Vue 3 中的实用写法示例

在 setup() 或 computed() 内部定义局部 Map：

const resultCache = new Map()
const expensiveResult = computed(() => {
  const key = `${props.id}-${props.type}-${props.filter}`
  if (resultCache.has(key)) {
    return resultCache.get(key)
  }
  const value = heavyCalculation(props.id, props.type, props.filter)
  resultCache.set(key, value)
  return value
})

若参数是对象，可用 JSON.stringify({ id, type, filter }) 生成 key；如含响应式引用，建议解构后再序列化，避免触发不必要的依赖收集。