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 ——但不立刻重算

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

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

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

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

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

什么情况下缓存会失效？

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

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

和 methods 的关键区别就在这里

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

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