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
都不会重复执行函数。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
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 应用更清晰、高效。
基本上就这些区别了，理解清楚就能避免滥用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
