How to understand the difference between computed and watch in Vue

Overview

We will use computed and watch more or less in Vue projects. Both of them seem to be able to monitor data, but there are still differences. So let's use a small example to understand the difference between the two.

computed

A computed property is a new value calculated based on the data declared in data or the data in props passed by the parent component. This new value will only change according to the change of known values. In short: this property depends on other properties and is calculated from other properties.

<p>Name: {{ fullName }}</p>
... ...
data: {
    firstName: 'David',
    lastName: 'Beckham'
},
computed: {
    fullName: function() { //The return value of the method is used as the property value return this.firstName + ' ' + this.lastName
    }
}

Define the method for calculating the property in the computed property object, and call it in the form of property access just like accessing the data property in the data object, that is, use {{method name}} to display the calculation result in the page.

Note: The computed property fullName cannot be defined in data, but the related known value of the computed property value is in data;

If fullName is defined in data, an error will be reported as shown below:

Because if the computed property value is a function, the get method will be used by default, and there must be a return value. The return value of the function is the property value of the property. The computed property defines fullName and returns the corresponding result to this variable. The variable cannot be defined and assigned repeatedly.

In the official documentation, an important feature of computed is also emphasized, that is, computed has a caching function. For example, I display fullName multiple times on the page:

<p>Name: {{ fullName }}</p>
<p>Name: {{ fullName }}</p>
<p>Name: {{ fullName }}</p>
<p>Name: {{ fullName }}</p>
<p>Name: {{ fullName }}</p>
... ... 

computed: {
    fullName: function () {
         console.log('computed') // Only prints once in the console return this.firstName + ' ' + this.lastName
    }
}

We know that the function defined in computed is only executed once, and is called only when the initial display or related data, props and other attribute data changes;

Computed property values ​​cache their calculation results by default. Computed properties are cached based on their responsive dependencies.

The computed code is executed only when the computed property is used. In repeated calls, as long as the dependent data remains unchanged, the calculation result in the cache is directly obtained. Computed will only be recalculated if the dependent data changes.

Advanced computed properties:

The properties in computed have a get method and a set method. When the data changes, the set method is called. Next, we use the getter/setter method of the calculated attribute to display and monitor the attribute data, that is, two-way binding.

computed: {
    fullName:
        get() { //Callback to read the current property value, calculate and return the value of the current property based on the relevant data return this.firstName + ' ' + this.lastName
        },
        set(val) { // Callback when the attribute value changes, update the related attribute data, val is the latest attribute value of fullName const names = val ? val.split(' ') : [];
            this.firstName = names[0]
            this.lastName = names[1]
        }
    }
}

watch monitoring properties

Use the $watch() or watch configuration of the vm object to monitor attribute changes on the Vue instance, or changes in certain specific data, and then perform certain specific business logic operations. When the property changes, the callback function is automatically called and the calculation is performed inside the function. The data sources it can monitor are: data, props, and data in computed.

The above example is implemented through watch:

watch:
    // Monitor firstName in data. If it changes, set the changed value to fullName in data. val is the latest value of firstName firstName: function(val) { 
        this.fullName = val + ' ' + this.lastName
    },
    lastName: function(val) {
        this.fullName = this.firstName + ' ' + val
    }    
}
// From the above, we can see that watch needs to monitor two data, and the code is repeated of the same type, so it is more concise than using computed

Note: The listening function has two parameters. The first parameter is the latest value, and the second parameter is the value before input. The order must be new value, old value. If only one parameter is written, it is the latest attribute value.

When choosing between watch and computed, another reference point is what the official website says: the watch method is most useful when you need to perform asynchronous or expensive operations when data changes. So watch must support asynchronous operation.

The above is limited to monitoring simple data types. To monitor complex data types, deep monitoring is required.

deep: To discover changes in the internal values ​​of an object, you can specify deep: true in the option parameter. Note that this is not necessary when listening for array changes.

data: {
    fullName:
        firstName: 'David',
        lastName: 'Beckham'
    }
},
watch:
    fullName:
        handler(newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        },
        deep: true
    }
}

The above print results:

The printed newVal and oldVal values ​​are the same, so although deep monitoring can monitor changes in objects, it cannot monitor changes in specific attributes of the object. This is because their references point to the same object/array. Vue does not keep a copy of the value before the mutation. [ vm.$watch deep monitoring ]

If you want to monitor changes in a single property of an object, there are two ways:

1. Directly monitor the properties of the object

watch:{
    fullName.firstName: function(newVal,oldVal){
        console.log(newVal,oldVal);
    }
}

2. Used with computed properties. Computed returns the property value you want to monitor, and watch is used to monitor.

computed: {
    firstNameChange() {
    return this.fullName.firstName
    }
},
watch:
    firstNameChange() {
        console.log(this.fullName)
    }
}

Summarize

Both watch and computed are based on Vue's dependency tracking mechanism. When a dependent data (dependent data: simply understood as instance data placed under objects such as data) changes, all related data that depends on this data will automatically change, that is, the relevant functions will be automatically called to realize the data change.

When the value of the dependency changes, some complex operations can be performed in watch, while the dependency in computed is just one value depending on another value, which is a dependency on value.

Application scenarios:

computed: used to handle complex logical operations; one data is affected by one or more data; used to handle situations that watches and methods cannot handle or are inconvenient to handle. For example, processing complex expressions in templates, the changing relationship between the number of items in the shopping cart and the total amount, etc.

watch: used to handle when an attribute changes and some specific business logic operations need to be performed, or asynchronous or high-cost operations need to be performed when data changes; a data change affects multiple data. For example, it is used to monitor routes, special processing of input box values, etc.

the difference:

computed

• Called when initializing display or related data, props and other attribute data changes;
• The calculated property is not in data. It is a new value obtained by calculation based on the data in data or props. This new value changes according to the change of the known value.
• Define the method of calculating the attribute in the computed attribute object, and call it in the form of attribute access, just like getting the data attribute in the data object;
• If the computed property value is a function, then the get method will be used by default, and there must be a return value. The return value of the function is the property value of the property.
• By default, the computed property value will cache the calculation result. In repeated calls, as long as the dependent data remains unchanged, the calculation result in the cache is directly obtained. Only when the dependent data changes, computed will be recalculated.
• In computed, properties have a get method and a set method. When the data changes, the set method is called.

watch

• It is mainly used to monitor changes in certain specific data, so as to perform certain specific business logic operations. It can be regarded as a combination of computed and methods.
• Data sources that can be monitored: data, props, and data in computed;
• Watch supports asynchronous operation;
• It does not support caching. Changes in monitored data will directly trigger corresponding operations.
• The listening function has two parameters, the first parameter is the latest value, and the second parameter is the value before input. The order must be new value, old value.

The above is the detailed content on how to understand the difference between computed and watch in Vue. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!