经验谈：揭秘computed、watch和methods特性的差异与妙用

2023-09-01 09:53:49

在Vue.js中，computed、watch和methods特性都是用于响应式数据的，它们可以帮助我们方便地处理和使用数据。computed特性和watch特性都提供了创建派生数据的机制，而methods特性则提供了创建方法的机制。

computed特性

computed特性用于创建派生数据。派生数据是指从其他数据计算得来的数据。例如，我们可以使用computed特性计算购物车中商品的总价格。computed特性的值是基于它的依赖进行缓存的。这意味着只有在它的依赖发生改变时，它才会重新计算它的值。这可以提高性能，因为我们不必每次都需要重新计算派生数据。

watch特性

watch特性用于监听数据的变化。当被监听的数据发生变化时，watch特性就会执行相应的函数。我们可以使用watch特性来执行各种操作，例如，更新组件的状态、向服务器发送数据等。

methods特性

methods特性用于创建方法。方法是指一组可以被调用的函数。我们可以使用methods特性来实现各种功能，例如，处理用户输入、显示对话框等。

computed特性与watch特性的区别

computed特性和watch特性都可以用于创建派生数据。但是，computed特性的值是基于它的依赖进行缓存的，而watch特性则不是。这意味着computed特性只有在它的依赖发生改变时才会重新计算它的值，而watch特性则会每次都重新计算它的值。

computed特性与methods特性的区别

computed特性用于创建派生数据，而methods特性用于创建方法。computed特性的值是基于它的依赖进行缓存的，而methods特性的值则不是。这意味着computed特性只有在它的依赖发生改变时才会重新计算它的值，而methods特性则会每次都重新计算它的值。

如何选择使用computed特性、watch特性和methods特性

在实际使用中，我们应该根据具体情况选择使用computed特性、watch特性或methods特性。

如果我们需要创建派生数据，并且该派生数据的值是基于它的依赖进行缓存的，那么我们应该使用computed特性。
如果我们需要创建派生数据，并且该派生数据的值不是基于它的依赖进行缓存的，那么我们应该使用watch特性。
如果我们需要创建方法，那么我们应该使用methods特性。

举个例子

假设我们有一个购物车组件，我们需要计算购物车中商品的总价格。我们可以使用computed特性来实现这个功能。

<script>
export default {
  computed: {
    totalPrice() {
      return this.items.reduce((total, item) => total + item.price, 0);
    }
  }
}
</script>

在上面的例子中，我们使用computed特性创建了一个名为totalPrice的派生数据。totalPrice的值是基于items数组进行缓存的。这意味着只有在items数组发生改变时，totalPrice的值才会重新计算。

我们还可以使用watch特性来实现这个功能。

<script>
export default {
  watch: {
    items() {
      this.calculateTotalPrice();
    }
  },
  methods: {
    calculateTotalPrice() {
      this.totalPrice = this.items.reduce((total, item) => total + item.price, 0);
    }
  }
}
</script>

在上面的例子中，我们使用watch特性监听items数组的变化。当items数组发生变化时，watch特性就会执行calculateTotalPrice()函数。calculateTotalPrice()函数将计算购物车中商品的总价格并将其存储在totalPrice数据中。

我们也可以使用methods特性来实现这个功能。

<script>
export default {
  methods: {
    calculateTotalPrice() {
      return this.items.reduce((total, item) => total + item.price, 0);
    }
  }
}
</script>