2023Vue中computed和watch的区别与应用场景

Vue中computed和watch是两种常用的属性，它们的作用和应用场景不同。在本文中，我们将详细介绍computed和watch的区别，并提供具体代码示例。

一、computed

computed是Vue的一个计算属性，它用于对数据进行处理和衍生出新的属性。computed属性是基于它的依赖进行缓存的，只有在相关依赖发生改变时，computed才会重新计算。

在Vue实例中，我们可以通过computed选项来定义计算属性。下面是一个示例：

new Vue({
  data: {
    num1: 2,
    num2: 3
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  }
})

在上面的代码中，我们定义了两个数据num1和num2，通过sum计算属性计算它们的和。

computed属性使用的时候，可以直接在模板中使用，同时Vue会自动追踪其依赖，当依赖发生变化时，computed会重新计算。这使得我们可以在模板中直接使用computed属性，而不需要手动更新。

<div>num1: {{ num1 }}</div>
<div>num2: {{ num2 }}</div>
<div>sum: {{ sum }}</div>

当num1或num2发生变化时，computed属性sum会自动重新计算。

computed属性适用于对数据进行复杂的计算或数据处理的场景。它提供了一种简洁而高效的方式来衍生新的属性。

二、watch

watch是Vue实例的一个属性，它用于监听数据的变化并执行相应的操作。watch属性通常用于需要在数据变化时执行异步操作、复杂的逻辑判断等场景。

同样，在Vue实例中，我们可以通过watch选项来定义监听属性。下面是一个示例：

new Vue({
  data: {
    num1: 2,
    num2: 3,
    sum: 0
  },
  watch: {
    num1: function(newVal, oldVal) {
      this.sum = newVal + this.num2;
    },
    num2: function(newVal, oldVal) {
      this.sum = this.num1 + newVal;
    }
  }
})

在上面的代码中，我们定义了两个数据num1和num2，通过watch选项监听它们的变化，并在变化时更新sum属性。

watch属性使用的时候，需要定义监听的属性，并指定一个回调函数。当监听的属性发生变化时，回调函数会被触发，并传入新值和旧值作为参数。

watch属性适用于对数据的变化需要执行一些具体操作的场景。它可以监听多个属性的变化，并在变化时执行相应的逻辑。

三、computed和watch的区别和应用场景

总结起来，computed属性适用于对数据进行复杂的计算或数据处理的场景，它可以简洁地衍生出新的属性，并且只在相关依赖发生改变时重新计算。

而watch属性更适用于需要在数据变化时执行异步操作、复杂的逻辑判断等场景，它可以监听多个属性的变化，并在变化时执行相应的逻辑。

最后，我们需要根据具体的业务需求来选择使用computed还是watch。在实际开发中，我们可以根据需求的复杂度和性能的考虑来选择合适的属性。