computed和watch的区别是什么？

Vue中的`computed`和`watch`都是响应式特性的一部分，但它们的作用和使用场景有所不同[^1][^2]。

1. **Computed属性**[^1]:
- Computed属性（也称为计算属性）是用来基于其他数据动态计算结果的。它们不会直接改变数据，而是返回一个新的值。
- 示例：假设有一个用户的年龄，你想显示用户的全名（名字+年龄），你可以定义一个 computed 属性来完成这个计算。

   data() {
     return {
       name: 'John',
       age: 25,
     }
   },
   computed: {
     fullName() {
       return this.name + ' (' + this.age + ')';
     }
   }

- 当`age`发生变化时，`fullName`会自动更新，无需手动触发。

2. **Watch监听器**[^1]:
- Watch则更像是一个事件处理器，它会在特定的数据变化时执行回调函数。
- 示例：如果你想在年龄增加时弹出一个提示，可以使用 watch 来实现。

   watch: {
     age(newAge, oldAge) {
       if (newAge > oldAge) {
         alert('年龄增加了!');
       }
     }
   }

- 当`age`的值改变时，watch回调会被调用。

总结来说，`computed`适合于基于已有数据创建新的计算结果，而`watch`更适合于数据变化后的副作用处理。`computed`是读取式的，`watch`则是写入式的。