Computed 缓存优化本质是“不白算、不重算”：依赖不变时跳过 getter 直接返回缓存值，靠 dirty 标志控制——初始 true，首次访问执行并置 false，后续访问若 dirty 为 false 则复用结果；依赖变更仅标记 dirty = true，下次访问才重算。
Computed 的缓存优化，本质是“不白算、不重算”——它不会在依赖没变时执行 getter 函数，而是直接返回上次算好的值。
缓存不是靠记忆，而是靠 dirty 标志控制
每个 computed 实例内部都有一个 dirty 布尔值：
- 初始为 true，表示“还没算过”或“结果可能过期”
- 首次访问时：执行 getter → 得到结果 → 缓存 value → 设 dirty = false
- 后续访问时：若 dirty === false，跳过 getter，直接返回缓存值
- 只要任一响应式依赖（如 ref、reactive 属性）被修改，Vue 就把该 computed 的 dirty 设为 true ——但不立刻重算
依赖没变，函数真的完全不执行
这不是“执行了但结果一样”，而是连函数体都不会进入。比如：
- 第一次读取
expensive.value：打印日志，执行计算，缓存结果 - 之后连续读十次，且依赖未变：日志只打一次，
heavyCalc()也只跑一次 - 哪怕你在模板里写了十次
{{ expensive }}，也只触发一次 getter
什么情况下缓存会失效？
只有当 Vue 明确追踪到的响应式依赖发生变化时，才会标记 dirty = true。注意：
- 普通 JS 变量、非响应式对象属性、函数返回值，都不算“依赖”
- computed 返回的对象内部被修改（如
myObj.x = 1），不会触发重新计算 —— 因为 Vue 不监听返回值的变更 - 异步更新后 DOM 渲染完成前，多次读取仍走缓存，不会因渲染时机错乱而重复执行
和 methods 的关键区别就在这里
methods 是纯函数调用，每次用都执行；computed 是响应式节点，受依赖状态和 dirty 控制：
-
methods.sum()：模板里写五次，执行五次 -
computed.sum：模板里用五次，依赖不变时只算一次，其余四次全走缓存 - 开销越大的计算逻辑，这个差异越明显——尤其涉及数组过滤、深层遍历、格式化等场景
