Vue3里computed的缓存到底怎么工作？常见疑问一次说清

开发Vue项目时,计算属性computed是高频工具，但你真的搞懂它的缓存逻辑了吗？为什么有时候改了数据，computed没更新？它和methods性能差异到底在哪？这篇文章把常见疑问拆碎了讲明白。

computed的缓存是怎么实现的？

Vue3的响应式系统靠依赖收集+惰性求值实现缓存，可以把computed想象成“记仇又偷懒的计算器”：

• 依赖收集：定义const sum = computed(() => a + b)时，Vue会给计算逻辑绑定“依赖追踪器”，悄悄记录依赖的响应式数据（比如a和b得是reactive或ref包装的，普通变量抓不住）。
• 惰性求值+缓存结果：第一次访问sum.value时，Vue执行计算并把结果存进缓存，之后再访问，它先检查依赖的a和b有没有变——没变就直接拿缓存结果，不用重新计算，这就是“惰性”的体现。

为什么非得搞缓存？不用的话有啥问题？

要是没缓存,computed和methods就没区别了！举个例子感受下：

做“购物车商品总价”功能时，计算逻辑是遍历所有商品、把价格×数量相加，若用methods写getTotal()，页面但凡渲染（比如组件重渲染、父组件传参变化），getTotal()就会每次重新遍历所有商品，要是购物车有1万件商品，反复遍历的性能消耗谁扛得住？

但用computed，只有商品数量/价格变化时才重新计算总价；其他时候（比如页面单纯重渲染）直接读缓存，缓存的核心价值是砍掉“重复计算”的性能消耗，尤其复杂逻辑或高频渲染场景，能省巨多CPU资源。

缓存啥时候会“失效”重新计算？

缓存失效只有一个触发条件：它依赖的响应式数据发生了变化，但这里有个容易踩的坑，得盯紧“响应式数据”：

情况1：依赖的响应式数据真的变了

用reactive定义对象时：

const state = reactive({ a: 1, b: 2 })
const sum = computed(() => state.a + state.b)
console.log(sum.value) // 第一次计算 → 3
state.a = 2            // 响应式数据a变化，触发依赖更新
console.log(sum.value) // 缓存失效，重新计算 → 4

情况2：依赖的“假响应式”数据变了（坑！）

计算属性里用普通变量（没被reactive/ref包装），Vue感知不到变化，缓存永远不会失效：

let num = 1 // 普通变量，非响应式
const wrongComputed = computed(() => num + 1)
console.log(wrongComputed.value) // 2
num = 2                          // 普通变量变化，Vue感知不到
console.log(wrongComputed.value) // 还是2！缓存没失效

只有响应式数据的变化，才会触发computed缓存更新。

和methods比，computed缓存优势体现在哪？

很多人初学疑惑：“computed和methods都能写计算逻辑，到底选哪个？”看两个维度：

维度1：执行时机

• methods里的函数每次调用都执行，比如页面写{{ getSum() }}，不管依赖变没变，每次渲染（哪怕父组件传参变导致子组件重渲染）都会重新执行getSum()。
• computed只有依赖变化时才重新计算，其他时候复用缓存结果。

维度2：性能差异（复杂逻辑才会凸显）

计算逻辑简单（比如return a + b）时，两者性能差异可忽略，但若是遍历大数组、多层循环、频繁DOM操作这类重逻辑，computed的缓存能把性能差距拉到天壤之别——毕竟重复计算的开销，CPU顶不住。

举个实际场景：表格组件用computed做“筛选符合条件的行”，表格有1000行时，筛选逻辑要遍历所有行；用computed，只有筛选条件或行数据变化时才重新遍历，比methods每次渲染都遍历快N倍。

开发时怎么用好computed缓存优化性能？

知道原理后,落地开发场景的技巧能避坑提效：

场景1：复杂数据处理优先用computed

需要过滤大数组、排序、多层嵌套计算时，把逻辑丢进computed，所有已完成的任务”“购物车满减后总价”这类衍生值，用computed既能缓存结果，代码也更语义化（一看就知道是“计算出来的属性”）。

场景2：警惕非响应式数据污染computed

computed里用了普通变量、第三方库返回的非响应式对象，记得用ref/reactive包一层，否则缓存永远不更新，bug能把人搞疯。

场景3：别把“副作用”逻辑塞到computed里

computed是纯计算逻辑（只返回值，不修改外部状态），若在computed里发请求、改DOM、修改其他响应式数据，不仅违背设计原则，还会因缓存逻辑导致“副作用执行不及时”（比如缓存生效时，副作用没触发），这类场景请用watch或methods。

场景4：结合高级API精细控制缓存（进阶）

想更精细控制缓存,可用shallowRef（只跟踪.value的变化，不跟踪内部对象）、markRaw（标记对象为非响应式）等API，比如大对象只有整体替换时才更新computed，用shallowRef包裹后，只有.value被赋值新对象时，computed才重新计算，内部属性变化不触发——减少不必要的缓存更新。

理解缓存，才能用好computed

computed的缓存逻辑是Vue性能优化的关键抓手,核心逻辑是：依赖响应式数据变化 → 缓存失效 → 重新计算，开发时别让非响应式数据混进computed，复杂逻辑优先用computed，简单逻辑看场景选，性能和可读性两手抓～

下次遇到“computed怎么没更新”，先检查依赖是不是响应式、有没有真的变化，大概率能解决～

（文章里的代码示例可复制到项目跑一遍，直观感受缓存生效和失效，记忆更深刻～）