Summary of Vue watch monitoring methods

In vue , watch is used to respond to data changes. There are roughly three ways to use watch .

1. The role of watch in vue is just like its name, which is the role of monitoring

For example, there is an object:

watchData: {
    name: '',
    age: '',
}

2. Monitor the properties of this object

watchData: {
    handler: function() {
        console.log();
    },
    deep: true
}

The monitoring object can be monitored with deep , otherwise the changes of the object cannot be detected

3. Monitor the properties of this object

Method 1:

watch:
 'watchData.name'(newValue, oldValue) {
     console.log(newValue);
 }
}

Method 2:

watch:
    'watchData.name': {
        handler: function() {
            console.log();
        }
    }
},

Why do we need to monitor the properties of an object? If we monitor an object, any data inside the object will cause watch to be re-executed. This may not be what you want, that is, to monitor a certain property change before executing watch , or to monitor any property change inside the object before executing watch , which will also cause a certain loss in performance. Therefore, we use this method of monitoring a single property of the object to deal with it, and wrap the "object.property to be monitored in quotation marks"

4. Monitor the properties of this object

computed: {
    getName() {
        return this.watchData.name 
    }
},
watch:
    getName(newValue, oldValue) {
        console.log(newValue);
    }
},

This method is actually the same as the second one. The difference is that computed is used, and then the getName method is listened to. In fact, the getName method returns name attribute in the watchData object.

This is the end of this article about the summary of vue watch monitoring method. For more relevant vue watch monitoring method content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!