Vue computed and watch usage distinction

Usage of computed

• Responsive Cache
• Each computed attribute will be cached. As long as the attributes depend on the computed attribute change, the computed attribute will be re-executeed and the view will be updated.
• The properties in the computed method cannot be defined in Date
• .It is cacheable, the page re-rendering value does not change, and the computed attribute will immediately return the previous calculation result without having to execute the function again

data: {
    firstName: 'one',
    lastName: 'two'
  },
// Calculation methodcomputed: {
allname:{
	//Callback function When you need to read the current attribute value, calculate and return the current attribute value based on the relevant data.	get() {//
		return  + ' ' + 
	},
	// Monitor the changes in the current attribute value, execute when the attribute value changes, and update the relevant attribute data	set(val){
		const names = (' ');
		 = names[0];
         = names[1];
	}
}
},

Usage of watch

• This method is most useful when you need to perform asynchronous or overhead operations when data changes
• Application: Listen to props, $emit or the value of this component to perform asynchronous operations
• No cacheability, the value will be executed if the page is re-rendered

watch: {
Listened data: {
handler(new value, old value) {
Related code logic...
        }
    }
}

• Listen to data: data defined in data
• New value: the new value after the data is changed;
• Old value: This data changes the previous value.

Common Applications

• Listen to the calculation and listening of this component
• Calculate or listen for props values ​​of parent-child passes
• It is divided into simple data types and complex data types to monitor. The monitoring method is as follows: the use of watch
• Listen to the changes in the state or getters value of vuex

computed:{
    stateDemo(){
        return this.$;
    }
}
watch:{
    stateDemo(){
        ('Vuex has changed')
    }
}

Common Errors

When modifying the value passed by the parent component, an error will be reported

props:['listShop'],
    data(){
      return{}
    },
    created(){
      =30
}

An error is reported. The error means to avoid directly modifying the value passed in by the parent component, because the value of the parent component will be changed.

Solution 1. If the passed type is a simple type, redefine a variable in data and change the pointer. The complex type cannot work. The complex type contains a pointer.

//There will not be any errors, nor will it affect the parent component!	props:['listShop'],
    data(){
      return{
        listShopChild: //Change the direction      }
    },
    created(){
      =30
    }

But if it is a complex type, because the pointer is stored, assigning a value to a new variable will also change the original variable value.

method:

1. Manual deep cloning

, only copying the first-level attributes, and copying one layer deeper than the shallow copy, so the purpose of deep cloning is still not possible.

3. Powerful and

4. Use computed to change directly

//Array depth cloning:var x = [1,2,3];
var y = [];
for (var i = 0; i < ; i++) {
    y[i]=x[i];
}
(y);  //[1,2,3]
(4);
(y);  //[1,2,3,4]
(x);  //[1,2,3]
//Object depth cloning:var x = {a:1,b:2};
var y = {};
for(var i in x){
    y[i] = x[i];
}
(y);  //Object {a: 1, b: 2}
 = 3;
(y);  //Object {a: 1, b: 2, c: 3}
(x);  //Object {a: 1, b: 2}
//Function Depth Cloning//Why can functions be assigned to cloned directly?//Because the object after the cloning of the function object will be copied once and the actual data will be stored separately, so the object before the cloning will not be affected.  Therefore, the cloning can be completed by simply copying "=".var x = function(){(1);};
var y = x;
y = function(){(2);};
x();  //1
y();  //2

//Method 3const obj1 = ((obj));

//Method 4computed:{
  listShopChild(){
    return 
   }
}

This is the article about the distinction between Vue computered and watch usage. For more related contents of Vue computered and watch, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!