Vue.js 作为现代前端框架，其响应式系统让数据驱动视图变得简单。computed 和 watch 是处理数据变化的两大核心手段，虽然都能监听变化，但设计初衷和使用场景截然不同。
computed：缓存的派生状态
computed 的核心在于依赖缓存。它会根据响应式依赖自动追踪变化，只有当依赖项发生改变时才会重新计算。如果依赖没变，多次访问计算属性会直接返回缓存结果，性能开销极小。
这决定了它最适合用于模板中的复杂计算或派生状态。比如根据多个输入字段生成一个展示值，或者对列表进行过滤排序。
new Vue({
data: { a: 1, b: 2 },
computed: {
sum() {
return this.a + this.b;
}
}
});
上面的例子中，只要 a 或 b 不变，sum 就不会重复执行函数体。这种特性让它在渲染层非常高效。
watch：监听副作用与异步操作
相比之下，watch 更像是一个观察者模式实现。它不关心返回值，只关注数据变化后需要执行的副作用。比如发起网络请求、操作 DOM、或者执行耗时较长的逻辑。
由于没有缓存机制，每次触发都会运行回调，因此不适合做纯计算逻辑。
new Vue({
data: { question: '' },
watch: {
question(newQuestion) {
// 模拟防抖后的异步请求
this.getAnswer();
}
},
methods: {
getAnswer() {
console.log('Fetching answer...');
}
}
});
在这个场景中，我们利用 watch 监听输入框变化，并在用户停止输入后触发查询。如果需要深度监听对象内部变化，还可以配合 deep 配置项使用。
实战示例：组合使用
在实际开发中，两者往往配合使用。下面这个组件展示了如何在一个页面里同时利用 做实时计算，用 处理按钮触发的逻辑。
