在 Vue.js 中，watch 和 computed 都是用于响应式数据处理的功能，但它们有不同的用途和实现方式。以下是二者的主要区别：
1. 用途
computed
- 计算属性：用于基于已有数据计算出新的值。它们是基于依赖的数据变化而自动重新计算的，通常用于模板中显示的派生状态。
- 缓存：计算属性会被缓存，只有当其依赖的数据发生变化时才会重新计算。
watch
- 侦听器：用于监听数据的变化，并在变化时执行某个函数。适合处理异步操作或需要在数据变化时执行特定逻辑的场景。
-
没有缓存：每次依赖的数据变化时，
watch中的函数都会被执行。
2. 语法
computed 示例
computed: {
doubled() {
return this.number * 2; // 计算属性
}
}
watch 示例
watch: {
number(newVal, oldVal) {
console.log(`number changed from ${oldVal} to ${newVal}`);
// 在 number 改变时执行某些操作
}
}
3. 使用场景
computed
- 用于需要在模板中展示的派生状态，或需要重用的计算逻辑。
- 适合计算结果依赖于其他响应式数据的情况。
watch
- 用于执行异步操作，例如 API 请求、数据持久化等。
- 适合在数据变化时执行副作用操作。
4. 性能
- computed 属性有缓存机制，性能更高，适合重复使用的计算。
- watch 由于每次变化都会执行，因此在频繁变化的情况下可能会影响性能。
总结
- 使用
computed来处理依赖于其他数据的计算结果，并希望利用缓存。 - 使用
watch来处理数据变化时需要执行的逻辑，特别是需要进行异步操作或副作用时。
选择使用 computed 还是 watch 主要取决于你的具体需求和场景。
