Vue has an in-depth understanding of the differences and usage scenarios between computed and watch

Vue has an in-depth understanding of the differences and usage scenarios between computed and watch

Vue is a simple, efficient, and flexible front-end framework. It has many excellent features, the two most important of which are computed and watch. Both of these features can be used to handle data that often occurs in Vue applications, but their usage is completely different. In this article, we will delve into the differences and applicable scenarios between computed and watch, and bring some practical experiences and techniques to readers.

Computed is a computed property of Vue, which is used to automatically update data when the data changes and can be cached. Computed can be understood as some data that needs to be dynamically processed. These data depend on the status of other data, such as the following example:

<template>
  <div>
      <p>商品价格：{{ price }}</p>
      <p>折扣价格：{{ salePrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discount: 0.8
    };
  },
  computed: {
    price() {
      return this.originalPrice;
    },
    salePrice() {
      return this.originalPrice * this.discount;
    }
  }
}
</script>

In this example, we define an original price and a discount price, and then The product price and discount price are calculated separately using the computed attribute. The code inside the computed attribute runs automatically. Whenever the data changes, they will be recalculated and the results can be cached, avoiding the efficiency problem of repeated calculations.

In contrast, watch is an observer feature of Vue, which is used to respond to functions when data changes. watch can monitor changes in a variable and perform some specific operations when the variable changes, such as the following example:

<template>
  <div>
      <input v-model="inputValue" />
      <p>{{ displayValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      displayValue: ""
    };
  },
  watch: {
    inputValue(newValue) {
      this.displayValue = newValue.toUpperCase();
    }
  }
}
</script>

In this example, we define an input box and a p label, which are respectively User input and user input capital letters are shown. A response function for the inputValue variable is defined under the watch attribute. When the inputValue variable changes, we change the value of the displayValue variable. It should be noted that the watch response function does not return anything, but modifies the data of the Vue instance.

In summary, the difference between computed and watch lies in whether they are passive calculations or responsive processing. Computed should be used when some special processing or formatting needs to be performed based on changes in arbitrary data. When you need to respond to data dynamically and there are some specific operations that need to be performed, watch should be used. Finally, it is important to note that they are independent of each other, a computed property will not be observed by watch, and vice versa.

(The code snippets in this article are from Vue official documentation.)

The above is the detailed content of Vue has an in-depth understanding of the differences and usage scenarios between computed and watch. For more information, please follow other related articles on the PHP Chinese website!