Computed — Computes attributes

Computed means attributes that are used to compute a value, in other words, attributes that are computed are computed attributes. This value is called without parentheses and can be used directly as an attribute.

Example:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
Copy the code

The cache

If the dependent properties have not changed, the calculated properties are not recalculated. Vue does special things to getters /settr so that these two functions do not cache by default.

The computed characteristics

  1. The biggest feature of 1.com PuTED is that it automatically caches based on their responsive dependencies. If the dependencies do not change, computed values do not change.

  2. 2.computed default function is get function, set function should be added by oneself.

Watch — Listen property

Watch is similar to computed in that it performs a function when data (attributes) change. Watch is more efficient when performing asynchronous or expensive operations as data changes.

Grammar a

Watch :{obj1:function(value,oldValue), // obj2(){}, //ES6 (obj3:[f1,f2], // two functions, Obj4 :'methodName', / / to find the methods in the corresponding function obj5 name: {handler: fn, deep: true, immediate: true}, the function of some webpack version could save obj6: 'object. A' : the function () {}}Copy the code

Grammar two

vm.$watch('obj',fn,{deep:... ,immediate:... })Copy the code

Watch of this

Note that it is best not to use arrow functions in Watch unless you give up using this.

const vm = new Vue({
    data: ...
    watch:{
        n:function(){
            this ===vm
        }
    }
})
Copy the code

In this code, this does not equal vm in the arrow function. First, the arrow function itself does not have this, and second, new Vue is not a function, but a function call, where this is a global variable.

Watch features

immediate

According to the logic of Vue itself, watch is a monitoring attribute, which monitors the change of data. When rendering for the first time, it is a process from scratch, a start, not a change. So by default Vue does not execute Watch for the first rendering. However, Vue provides the immediate method to indicate whether watch should be executed during the first rendering.

Immediate: true/false // True Executes the command. False Does not execute it. The default value is falseCopy the code

Deep

In Vue data, complex types store addresses and simple types store values. For simple types of data such as numbers, changing the value is a direct change. But as far as objects are concerned, if the address doesn’t change, the object doesn’t change. The property inside the object changes, but the object remains the same. Vue provides a deep method to determine whether to look at changes in attributes in the object.

Deep: true/false //true determines the attributes in the object, default flaseCopy the code

conclusion

Computed mainly focuses on changes between dependencies and caching. Watch mainly performs something when data changes, rather than producing a structure, such as recording history or logging.