Vue watch Listening object properties detailed explanation

1. Vue watch overview

There are two types of watch listener formats for Vue:Method FormatandObject formatlistener.

• The listener in the method format can onlyListen to simple data types,like:Number、String,… Cannot listen for changes in object properties, nor can it be automatically triggered when entering the page;
• Object format listeners can listenObject propertiesChanges. Under certain conditions, data changes can also be monitored when loading the page;

2. The listening method of Vue object

1. Key name segmentation, listening to the objectA certain attributechange;
The attribute name passes.Split from the object and passquotation marksPackage, can listen to a certain attribute of the object

data() {
	return {
		obj:{
			name:'andy',
			age:18
}}},

watch:{
	''() { 
		// Code implementation	}
}

+ watch, listen to the objectA certain oneattribute changes;

computed:{
     ageVal() {
           return ;
     }
}
 watch:{
     ageVal(newval,oldval) {
           // Code implementation     }
}

Deep monitoring, monitoring objectAll propertieschange;

• deep：trueTurn on deep monitoring. The property value of any attribute changes will trigger deep depth monitoring;
• deep deep listening can only get the latest value;
• Deep deep listening is not recommended, which can easily cause page stuttering, because deep deep listening requires traversing all nested properties in the listened object;

obj:{
      handler(val) {
           // The code implements that the val value is obj the entire object      },
      deep:true // When deep is true, enable deep monitoring      // immediate:false When the immediate value is true, you can also listen to the data changes when the page is just loaded}

This is the end of this article about the properties of Vue watch listening objects. For more related content of Vue watch listening objects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!