computed核心价值在于“只在该算时才算”，通过依赖收集、结果缓存、失效更新三步闭环实现响应式缓存；而methods每次调用必执行，无缓存无依赖追踪。
Vue 计算属性（computed）的核心价值不在“能算”，而在“只在该算的时候才算”——它的缓存机制是性能优化的关键设计，不是可有可无的附加功能。
缓存怎么工作的？三步闭环
计算属性不是简单地“记下结果”，而是一套自动维护的响应式闭环：
-
依赖收集：首次访问 computed 时，Vue 会执行其 getter 函数，并在执行过程中“监听”所有被读取的响应式数据（如
ref的.value、reactive对象的属性），把这些数据记为当前计算属性的依赖。 - 结果缓存：函数执行完毕后，结果被保存，同时该 computed 被标记为“干净”（clean）。后续访问直接返回这个值，不重跑函数。
- 失效与更新：一旦任一依赖发生变化，Vue 会把该 computed 标记为“脏”（dirty）。下次再读取它时，才重新执行 getter、更新缓存、并再次标记为 clean。
为什么不能用 Date.now() 或 Math.random()？
因为这些不是响应式依赖。Vue 只能追踪明确声明的响应式数据（ref、reactive 等），而 Date.now() 每次调用都返回新值，但 Vue 完全感知不到它“变没变”——所以 computed 不会重新计算，结果永远停留在第一次运行时的值。
类似情况还包括：外部变量、非响应式对象属性、异步回调中未纳入响应式系统的值。
computed 和 methods 的本质区别
两者都能输出值，但行为逻辑完全不同：
- methods：每次模板重渲染或手动调用时，函数必定执行，无条件、无记忆、无判断。
- computed：只在依赖变更后首次访问时执行，其余时间走缓存；它背后有依赖图、脏检查、惰性求值整套机制支撑。
比如一个计算属性处理 10 万条数据过滤，模板里引用 5 次，computed 只算 1 次；methods 会算 5 次——开销差异在真实场景中非常明显。
什么时候缓存会“失灵”？常见陷阱
缓存不是绝对可靠，以下情况会让预期失效：
- 在 getter 中修改了响应式数据（造成循环依赖或意外触发更新）；
- 依赖了非响应式对象（例如普通 const 对象、props 解构后的值未用 toRefs 包裹）；
- 使用了数组索引赋值（
arr[0] = x）或直接设置 length（Vue 3 对这两者响应式支持有限，需用splice或replace）； - 在 setup 中错误地将 computed 结果再次用 ref 包裹并修改，破坏了只读语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
