Vue 中分别简述 computed 和 watch 的使用场景？

computed 和 watch 都是 Vue 中用于监听数据变化的功能，它们的使用场景略有不同：

computed 的使用场景：

• 派生数据： 当需要根据已有的数据计算出新的数据时，可以使用 computed。它可以基于已有的响应式数据进行计算，并且只有相关依赖发生变化时才会重新计算，具有缓存特性。
• 简化模板逻辑： 用于处理一些复杂逻辑或计算属性，可以直接在模板中使用，而无需在模板中书写复杂的计算逻辑。

// 示例：计算商品总价
computed: {
  totalPrice() {
    return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
  }
}

watch 的使用场景：

• 监听特定数据变化： 当需要监听某个数据的变化，并在数据变化时执行一些异步或复杂操作时，可以使用 watch。
• 对一些数据变化做出响应： 比如需要在特定数据变化时执行一些操作，比如发送请求、执行动画等。

// 示例：监听数据变化，当 message 改变时执行操作
watch: {
  message(newValue, oldValue) {
    // 执行相应操作，比如发送请求等
  }
}

总体而言，computed 适合用于计算或派生数据，并且它具有缓存特性；而 watch 更适合用于对数据的变化做出响应，执行一些特定的操作。选择使用哪种方式取决于你的具体需求。