computed 适合基于已有数据同步计算新值，具有缓存机制，适用于格式化文本、过滤数组、判断状态等场景；例如通过 fullname 计算姓氏和名字的拼接。watch 则适合监听数据变化后执行异步或复杂操作，如发送 api 请求、深度监听对象变化，例如监听 searchquery 发起搜索或使用 deep: true 监听 userinfo 的深层变化。选择时应明确用途，生成新数据优先用 computed，执行副作用则用 watch，避免逻辑混乱。
在 Vue 开发中，
computed和
watch是两个常用但作用不同的响应式特性。它们都用来处理数据变化，但使用场景和逻辑出发点不一样。
简单来说：computed
适合基于已有数据计算出新值，而 watch
更适合观察数据变化后执行异步或复杂操作。
computed：适合依赖已有数据做“同步计算”
computed属性本质上是一个带有缓存的函数，当它所依赖的数据发生变化时，会重新计算并返回结果。由于有缓存机制，如果依赖没变，直接读取上次的结果，性能更好。
立即学习“前端免费学习笔记（深入）”；
常见使用场景包括：
- 格式化文本内容（如拼接姓名、金额格式）
- 过滤数组（如根据条件筛选列表）
- 判断状态（如判断用户是否登录）
比如你想展示一个全名，由姓氏和名字组成：
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}这种写法比在模板里写表达式更清晰、复用性更强。而且只要
firstName或
lastName没变，多次调用
fullName都不会重复执行函数。
watch：适合监听变化后做“副作用”处理
watch的核心在于“监听”，当你需要在数据变化时执行一些操作，尤其是异步操作或者开销较大的任务，这时候就更适合用
watch。
典型场景包括：
- 异步请求数据（如输入关键词后自动搜索）
- 深度监听对象或数组的变化
- 在数据变化后更新多个其他状态
例如，你希望当用户输入搜索词时，自动发起 API 请求：
watch: {
searchQuery(newVal) {
if (newVal) {
this.fetchResults(newVal);
}
}
}这里不适合用
computed，因为
fetchResults是异步操作，也不应该被缓存。
另外，如果你要监听的是一个对象内部的变化，可以加上
deep: true：
watch: {
userInfo: {
handler(newVal) {
console.log('用户信息变了');
},
deep: true
}
}选择建议：先看用途，再选方式
- 如果你的目标是生成一个新的数据值供模板使用，优先考虑
computed
- 如果你的目标是在数据变化时做一些事情，比如发送请求、修改其他状态、触发动画等，那就用
watch
- 不要为了监听而监听，避免在
watch
中做太多与当前数据无关的操作，容易让逻辑变得混乱
总的来说，
computed更偏向“输出值”，而
watch更偏向“做事情”。
合理使用这两个特性，能让你的 Vue 应用更清晰、高效。
基本上就这些区别了，理解清楚就能避免滥用。
