Vue中computed与watch的区别

Vue中computed和watch都是用来响应数据变化的，它们都可以使你的应用对数据的变化做出反应。computed是计算属性，而watch是监听。computed的值会根据你所依赖的数据动态显示新的计算结果，并且自动缓存。watch则是在某个属性变化时执行一个函数。

1. computed

computed属性是通过一个函数来计算出一个新的值，这个函数可以依赖于其他属性的值。当依赖的属性的值发生变化时，computed属性的值也会随之发生变化。

computed属性的语法如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

在上面的例子中，fullName是一个computed属性，它依赖于firstName和lastName两个属性。当firstName或lastName的值发生变化时，fullName的值也会随之发生变化。

2. watch

watch是一个监听器，它可以监听一个或多个属性的变化，当这些属性的值发生变化时，watch就会执行一个函数。

watch的语法如下：

watch: {
  firstName(newVal, oldVal) {
    // 当firstName的值发生变化时执行这个函数
  },
  lastName: {
    handler(newVal, oldVal) {
      // 当lastName的值发生变化时执行这个函数
    },
    immediate: true // 立即执行一次
  }
}

在上面的例子中，firstName和lastName都是被监听的属性。当firstName或lastName的值发生变化时，对应的函数就会执行。

3. computed和watch的区别

computed和watch的主要区别在于：

• computed是计算属性，而watch是监听器。
• computed的值会根据依赖的属性的值动态变化，而watch只会监听属性的变化。
• computed的值可以被直接使用，而watch只能通过函数来使用。

4. 什么时候使用computed？

computed适用于以下情况：

• 你需要一个新的值，这个值可以从其他属性的值计算出来。
• 你希望这个新值总是最新的。
• 你希望这个新值可以被直接使用。

5. 什么时候使用watch？

watch适用于以下情况：

• 你需要在某个属性的值发生变化时执行一个函数。
• 你希望这个函数只在属性的值发生变化时执行。
• 你不关心这个属性的值。

6. 性能优化

在Vue中，computed和watch都是开销较小的操作，但它们也会对性能产生一些影响。因此，在使用它们时需要注意以下几点：

• 尽量减少computed属性的数量。
• 尽量减少watch监听器的数量。
• 只监听你真正需要监听的属性。
• 在watch函数中尽量避免执行耗时的操作。