Computed 缓存优化如何理解 computed 在没有依赖变动时跳过函数执行直接读取缓存

Computed 缓存优化本质是“不白算、不重算”：依赖不变时跳过 getter 直接返回缓存值，靠 dirty 标志控制——初始 true，首次访问执行并置 false，后续访问若 dirty 为 false 则复用结果；依赖变更仅标记 dirty = true，下次访问才重算。

Computed 的缓存优化，本质是“不白算、不重算”——它不会在依赖没变时执行 getter 函数，而是直接返回上次算好的值。

缓存不是靠记忆，而是靠 dirty 标志控制

每个 computed 实例内部都有一个 dirty 布尔值：

1. 初始为 true，表示“还没算过”或“结果可能过期”
2. 首次访问时：执行 getter → 得到结果 → 缓存 value → 设 dirty = false
3. 后续访问时：若 dirty === false，跳过 getter，直接返回缓存值
4. 只要任一响应式依赖（如 ref、reactive 属性）被修改，Vue 就把该 computed 的 dirty 设为 true ——但不立刻重算

依赖没变，函数真的完全不执行

这不是“执行了但结果一样”，而是连函数体都不会进入。比如：

const expensive = computed(() => { console.log('我被调用了'); return heavyCalc(); })

1. 第一次读取 expensive.value：打印日志，执行计算，缓存结果
2. 之后连续读十次，且依赖未变：日志只打一次，heavyCalc() 也只跑一次
3. 哪怕你在模板里写了十次 {{ expensive }}，也只触发一次 getter

什么情况下缓存会失效？

只有当 Vue 明确追踪到的响应式依赖发生变化时，才会标记 dirty = true。注意：

1. 普通 JS 变量、非响应式对象属性、函数返回值，都不算“依赖”
2. computed 返回的对象内部被修改（如 myObj.x = 1），不会触发重新计算 —— 因为 Vue 不监听返回值的变更
3. 异步更新后 DOM 渲染完成前，多次读取仍走缓存，不会因渲染时机错乱而重复执行

和 methods 的关键区别就在这里

methods 是纯函数调用，每次用都执行；computed 是响应式节点，受依赖状态和 dirty 控制：

1. methods.sum()：模板里写五次，执行五次
2. computed.sum：模板里用五次，依赖不变时只算一次，其余四次全走缓存
3. 开销越大的计算逻辑，这个差异越明显——尤其涉及数组过滤、深层遍历、格式化等场景