在 Vue 的响应式系统中，computed（计算属性）和 watch（侦听器）都是处理依赖数据变化的重要工具，但它们的设计目标、执行机制和适用场景存在本质差异。很多开发者在初期容易混淆两者，导致代码冗余、性能下降甚至逻辑错误。厘清它们的核心区别，有助于写出更清晰、高效且可维护的 Vue 应用。
计算属性（computed）：声明式派生状态
computed 的核心是基于响应式依赖进行缓存的派生值计算。它本质上是一个带有 getter（可选 setter）的函数，其返回值会被 Vue 自动追踪依赖，并在依赖未变化时直接返回缓存结果，避免重复计算。
例如：
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
当 firstName 或 lastName 改变时，fullName 才会重新求值；若多次访问 fullName 而依赖未变，后续访问将直接返回缓存值，不会重复执行函数体。
这种“惰性求值 + 缓存”机制使得 computed 非常适合用于：
- 模板中需要展示的派生数据（如格式化时间、过滤列表、拼接字符串）；
- 多个组件共享的复杂逻辑封装；
- 需要避免重复执行昂贵计算的场景（如数组排序、深度遍历）。
值得注意的是，computed 是同步的，且不能执行副作用操作（如修改其他状态、发起请求）。它的设计哲学是“纯函数”——输入决定输出，无外部影响。
侦听器（watch）：响应式副作用管理
与 computed 不同，watch 的目的是在响应式数据变化时执行异步或开销较大的副作用操作。它不返回值，而是触发一个回调函数，允许开发者在数据变更后执行自定义逻辑。
基本用法：
watch: {
searchQuery(newVal) {
if (newVal.length > 2) {
this.fetchSearchResults(newVal);
}
}
}
watch 支持深度监听（deep: true）、立即执行（immediate: true）、监听多个源（Vue 3 中可传入数组或 reactive 对象）等高级选项，灵活性远高于 computed。
典型适用场景包括：
- 监听路由变化并加载数据；
- 表单输入防抖/节流后提交；
- 当某个状态变化时同步更新 localStorage 或发送埋点；
- 需要执行异步操作（如 API 请求）的响应逻辑。
由于 watch 回调可能包含副作用，Vue 不对其进行缓存，每次依赖变化都会触发执行（除非使用防抖等手动控制）。
核心区别对比
| 维度 | computed | watch |
|---|---|---|
| 目的 | 派生新值（声明式） | 响应变化执行副作用（命令式） |
| 缓存 | 有（依赖不变则不重新计算） | 无（每次变化都触发回调） |
| 返回值 | 有，可直接在模板或 JS 中使用 | 无，仅执行逻辑 |
| 异步支持 | 不支持（必须同步返回） | 支持（可在回调中 await） |
| 调试难度 | 低（逻辑集中、无副作用） | 较高（副作用分散，易产生竞态） |
| 性能开销 | 低（仅在依赖变化时计算） | 视回调内容而定，可能较高 |
一个常见误区是用 watch 实现本该用 computed 的逻辑。例如：
// ❌ 反模式：用 watch 模拟 computed
data() {
return { fullName: '' };
},
watch: {
firstName(val) { this.fullName = val + ' ' + this.lastName; },
lastName(val) { this.fullName = this.firstName + ' ' + val; }
}
这种方式不仅冗余，还容易在初始化时遗漏赋值，且无法享受缓存优势。正确的做法是直接使用 computed。
Vue 3 Composition API 中的表现
在 setup() 中，computed 和 watch 以函数形式提供：
import { ref, computed, watch } from 'vue';
const count = ref(0);
const double = computed(() => count.value * 2);
watch(count, (newVal) => {
console.log('Count changed to:', newVal);
});
此时两者的语义更加清晰：computed 返回一个 ref 对象，watch 接收一个响应式源和回调。Vue 3 还新增了 watchEffect，它自动追踪回调中的响应式依赖，适合“立即执行 + 自动依赖收集”的场景，但依然属于副作用范畴，不能替代 computed 的缓存特性。
如何选择？
- 优先使用
computed：只要你的需求是“根据其他数据派生出一个值”，且该值用于展示或作为其他计算的输入，就应首选computed。 - 使用
watch当且仅当：你需要在数据变化时执行副作用（如请求、日志、状态同步），或处理异步流程。
遵循这一原则，不仅能提升应用性能，还能让代码逻辑更符合 Vue 的响应式设计理念。
