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

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

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

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

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

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

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

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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

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

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

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

什么时候不该用 computed？

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

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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！