Vue 计算属性如何处理依赖项变化时的性能优化与缓存命中机制

Vue计算属性性能优化核心在于依赖追踪与缓存命中机制：初始化时收集ref、reactive等响应式依赖，未变更则直接返回缓存值；解构、非响应式变量或错误写法会切断追踪导致失效。

Vue 计算属性的性能优化核心，就藏在它的缓存命中机制里——不是“每次都算”，而是“只在该算的时候才算”。它不靠手动控制，而是由响应式系统自动判断依赖是否真的变了。

依赖追踪：缓存生效的前提

computed 初始化时会执行一次 getter，并在此过程中“路过”所有被读取的响应式数据（比如 ref.value、reactive 对象的属性），Vue 就把它们记下来，形成一条依赖链。之后只要这些数据没变，缓存就一直有效。

1. 能被追踪的：ref、reactive、toRef、computed 本身（支持嵌套依赖）
2. 无法触发更新的：普通 const 变量、Date.now()、Math.random()、非响应式对象属性
3. 特别注意：解构响应式对象（如 const { name } = user）会让 name 脱离响应式链，导致缓存失效

缓存命中：什么情况下直接返回旧值？

当你访问 computed 属性时，Vue 先检查它的依赖有没有被标记为“已变更”。没有变更 → 直接返回上次缓存的 _value；有变更 → 标记为 dirty，重新运行 getter 并更新缓存。

1. 模板中多次使用同一个 computed，只在首次或依赖变化后计算一次
2. 即使 computed 被 JS 代码反复读取（如循环里 console.log(totalPrice.value)），只要依赖未变，也不重复执行
3. 这个过程是惰性的：没被访问就不计算，也不会提前占用资源

避免缓存失效的典型写法陷阱

缓存不是失效了，往往是写法切断了依赖追踪路径。常见问题包括：

1. 用 this.items[this.activeKey] 动态取值，但 activeKey 没变、items 却被整个替换 → Vue 可能漏掉通知；建议改用 items.find(item => item.id === activeKey) 或配合 JSON.stringify(items) 强制触发（慎用）
2. 在 getter 中调用无返回值的函数（如 logUsage()），而该函数内部修改了响应式数据 → 这些修改不会被当前 computed 捕获，造成视图滞后
3. 把 computed 结果再赋给另一个 ref（如 const cached = ref(computedVal.value)）→ 失去响应性，也绕过了缓存机制

什么时候不该用 computed？

缓存虽好，但不是万能钥匙。以下情况更适合用 methods 或 watchEffect：

1. 需要传参的逻辑（如 getProductById(id)）→ methods 更自然
2. 含副作用操作（发请求、写 localStorage、触发事件）→ computed 应纯计算，副作用放 watch 或 methods
3. 依赖不可靠（如 window.innerWidth）→ 它不是响应式数据，computed 不会监听它变化，应结合 onMounted + window.addEventListener
4. 实时性极高且依赖频繁抖动（如输入框节流前的原始输入）→ 可考虑 watchEffect 配合防抖控制执行时机