The difference and application scenarios between computed and watch in Vue

Computed and watch are two commonly used attributes in Vue, and their functions and application scenarios are different. In this article, we will introduce the difference between computed and watch in detail and provide specific code examples.

1. computed

Computed is a computed property of Vue, which is used to process data and derive new properties. The computed property is cached based on its dependencies, and computed will only be recalculated when the relevant dependencies change.

In a Vue instance, we can define computed properties through the computed option. The following is an example:

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

In the above code, we define two data num1 and num2, and calculate their sum through the sum calculation attribute.

When the computed attribute is used, it can be used directly in the template, and Vue will automatically track its dependencies. When the dependencies change, computed will be recalculated. This allows us to use computed properties directly in templates without having to update them manually.

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

When num1 or num2 changes, the computed attribute sum will be automatically recalculated.

The computed attribute is suitable for scenarios where complex calculations or data processing are performed on data. It provides a concise and efficient way to derive new properties.

2. watch

watch is a property of the Vue instance, which is used to monitor data changes and perform corresponding operations. The watch attribute is usually used in scenarios where asynchronous operations and complex logical judgments need to be performed when data changes.

Similarly, in a Vue instance, we can define listening properties through the watch option. Here is an example:

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;
    }
  }
})

In the above code, we define two data num1 and num2, monitor their changes through the watch option, and update the sum attribute when they change.

When using the watch attribute, you need to define the monitoring attribute and specify a callback function. When the monitored property changes, the callback function will be triggered and pass in the new value and the old value as parameters.

The watch attribute is suitable for scenarios where specific operations need to be performed on changes in data. It can monitor changes in multiple properties and execute corresponding logic when they change.

3. The difference and application scenarios between computed and watch

To summarize, the computed attribute is suitable for scenarios where complex calculations or data processing are performed on data, and it can succinctly derive new attributes. , and are only recalculated when related dependencies change.

The watch attribute is more suitable for scenarios where asynchronous operations and complex logical judgments need to be performed when data changes. It can monitor changes in multiple attributes and execute corresponding logic when they change.

Finally, we need to choose between computed and watch based on specific business needs. In actual development, we can choose appropriate attributes based on the complexity of the requirements and performance considerations.

The above is the detailed content of The difference and application scenarios between computed and watch in Vue. For more information, please follow other related articles on the PHP Chinese website!