1、简介
在 Vue 中，computed 和 watch 都可以基于数据变化做处理，但应用场景和机制有所不同。
computed（计算属性）
用于根据现有的响应式数据，动态计算出一个新的属性值，并且具有缓存功能。watch（侦听器）
用于监听现有响应式数据的变化，并在变化发生时执行特定操作（可异步）。
2、主要区别对比
| 对比项 | computed（计算属性） | watch（侦听器） |
|---|---|---|
| 用途 | 适合根据多个数据属性计算出一个复杂的新值 | 适合在数据变化时执行逻辑（包括异步任务） |
| 返回值 | 必须有返回值（getter） | 无需返回值 |
| 执行时机 | 仅当依赖的响应式数据变化时才重新计算 | 每当监听的数据变化时立即执行回调 |
| 缓存 | 有缓存，依赖不变时多次访问不会重复计算 | 无缓存，每次变化都会执行 |
| 异步支持 | 不支持异步 | 支持异步操作 |
| 初始化执行 | 初始化时会计算一次 | 默认不执行（可通过 immediate: true 让其初始化执行） |
| Setter | 默认只有 getter；可自定义 setter 以支持赋值 | 不涉及赋值 |
| 适用场景 | 多个数据影响一个结果 | 一个数据变化影响多个结果 |
| 回调参数 | 无直接参数 | 有两个参数：新值（newValue）、旧值（oldValue） |
3、使用示例
1）computed 示例
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return`${this.firstName} ${this.lastName}`;
},
set(value) {
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
}
2）watch 示例
export default {
data() {
return {
searchText: ''
}
},
watch: {
searchText: {
handler(newVal, oldVal) {
console.log(`搜索内容从 ${oldVal} 变为 ${newVal}`);
this.fetchData(newVal);
},
immediate: true// 初始化时执行一次
}
},
methods: {
fetchData(query) {
// 模拟异步请求setTimeout(() => {
console.log(`请求数据：${query}`);
}, 500);
}
}
}
4、总结
1）当需要依赖多个数据计算一个值时，使用 computed。
2）当需要监听数据变化并触发逻辑（尤其是异步操作）时，使用 watch。
3）computed 偏向于数据派生，watch 偏向于事件响应。