[!info] related notes

• 所属 MOC: Vue MOC
• 上位主题: Vue 响应式系统
• 前置概念: Vue中的ref和reactive
• 易混淆概念: Vue 中的 watch 和 watchEffect, react-use-memo
• 相关机制: vue-render-and-update-flow, vue-next-tick

Vue计算属性computed

computed 用于根据已有响应式状态推导出新的结果。它表达的是派生状态，而不是副作用。

一句话定义

如果某个值可以由别的状态算出来，就优先考虑 computed，而不是手动维护第二份状态。

最小例子

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => `${firstName.value} ${lastName.value}`)

为什么它重要

• 避免重复保存派生结果
• 让模板中的表达式更轻
• 有缓存，只在依赖变化时重新计算

一个更体系化的理解

computed 解决的不是“写法更优雅”，而是“派生状态应该如何表达”。

如果一个值本来就能由别的状态推导出来，再额外保存一份，通常会带来：

• 同步负担
• 重复状态
• 更新遗漏

所以 computed 的价值是把“解释状态”这件事单独建模出来。

最适合用在什么地方

• 总价、总数、过滤结果、排序结果
• 是否登录、是否可提交、是否禁用按钮
• 由多个状态共同推导出的展示值

和普通方法的区别

• 方法每次调用都会重新执行
• computed 会基于依赖做缓存

如果逻辑是“拿来渲染的派生值”，通常更适合 computed。

和 React 里的直觉怎么对照

如果从 React 帮助记忆：

• computed 在问题定位上有点像“渲染期派生值”
• 但它不是简单等同于 useMemo

因为 Vue 的 computed 是建立在响应式依赖追踪上的，而不是手写依赖数组。

和 watch 的区别

• computed 产出一个值
• watch 处理值变化后的副作用

和更新流程的关系

computed 最终还是会参与到 Vue 的渲染与更新流程里，但它表达的是“这个值怎么推导”，不是“这个值变了以后要做什么”。

常见误区

• 把副作用逻辑写进 computed
• 本来是派生值，却额外用 ref 存一份再手动同步
• 在模板里写复杂链式表达式，而不是提取成 computed

最短记忆方式

computed 不是“方便写代码的小技巧”，而是 Vue 里表达派生状态的标准方式。

面试要点

来自 vue-computed-vs-watch-interview-question 的面试视角整理。

一句话回答

computed 适合描述基于已有状态计算出的派生结果，强调缓存和声明式依赖；watch 适合在数据变化时执行副作用逻辑，比如请求、日志、联动操作。

最稳的回答主线

computed

• 用来得到一个新的派生值
• 有缓存
• 更偏声明式

watch

• 用来监听变化并执行逻辑
• 更偏副作用
• 常见于请求、同步外部系统、联动处理

面试里一句最重要的话

能用 computed 表达的派生结果，通常不要用 watch 硬写一遍。

常见误区

用 watch 维护另一个本可计算出来的状态

这会让状态源变多，维护成本变高。

把所有数据变化都丢给 watch

watch 不是默认入口，它更适合处理副作用。

最短记忆方式

computed 算值，watch 做副作用。

Related notes

• Vue MOC
• Vue响应式系统