Vue中的watch与computed区别理解

watch与computed的区别

在Vue中，watch和computed都是用来响应数据变化的特性，但两者之间存在着一些关键的区别：

• 计算属性computed 是缓存的，只有依赖数据发生改变，才会重新进行计算。这使得computed属性非常适合用于快速计算视图（View）中显示的属性。例如，你可以使用computed属性来计算一个数组的总和或平均值。
• 侦听器watch 不是缓存的，每次依赖数据发生改变，都会重新执行。这使得watch非常适合用于监听数据的变化，并做出相应的反应。例如，你可以使用watch来监听一个表单输入框的值，并在值发生改变时更新数据库。

watch与computed的具体用法

watch

watch的用法很简单，只需要在组件的methods中定义一个watch对象，并指定要监听的数据和回调函数即可。例如：

methods: {
  watchName: function (val, oldVal) {
    console.log('name changed from ' + oldVal + ' to ' + val)
  }
}

在这个例子中，我们将监听name数据的变化，并在数据发生改变时输出一条日志消息。

computed

computed的用法也比较简单，只需要在组件的computed属性中定义一个计算属性，并指定计算属性的依赖数据和计算逻辑即可。例如：

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

在这个例子中，我们将计算fullName属性，该属性的值是firstName属性和lastName属性的组合。

watch与computed的优缺点

watch的优点：

• 使用简单，易于理解
• 可以监听任何数据，包括对象和数组
• 可以对数据变化做出更复杂的反应

watch的缺点：

• 每次数据发生改变，都会重新执行回调函数，这可能会导致性能问题
• 不支持缓存，因此无法用于快速计算视图中显示的属性

computed的优点：

• 缓存计算结果，只有依赖数据发生改变，才会重新进行计算
• 支持快速计算视图中显示的属性
• 可以使用更简洁的语法

computed的缺点：

• 只支持监听基本数据类型，不支持监听对象和数组
• 不能对数据变化做出复杂的反应

watch与computed的适用场景

watch和computed都是非常有用的特性，但它们适用于不同的场景。一般来说，如果需要监听数据的变化并做出相应的反应，则应该使用watch。如果需要快速计算视图中显示的属性，则应该使用computed。

总结

希望通过本文，你已经对Vue中的watch和computed有了更深入的理解。在实际开发中，你可以根据自己的需求选择合适的特性来使用。