Detailed explanation of Vue's monitoring method case

Monitoring method in Vue

watch

Notice

Name: You should give the same name to the attribute you want to monitor.

1. Function

Used to monitor data changes in the vue instance and modify state changes at any time

2. Trigger conditions

When the property you monitor changes, the corresponding monitoring method will be called automatically

3. Usage scenarios

Used for asynchronous processing and relatively expensive operations

4. Examples

	 watch:{
             name(newvalue,oldvalue){
                  //Calculated properties can accept two parameters, the first parameter is the new property value, the second parameter is the old property value // this.age
                    // console.log('name property has changed')
                    console.log(newvalue,oldvalue)
                }

5. When monitoring an object

<script>
export default {
    data() {
        return {
            obj: {
                name: "Zhang San",
                age: 20,
                children: [
                    {
                        name: "Li Si",
                        age: 27
                    },
                    {
                        name: "Wang Wu",
                        age: 23
                    }
                ]
            }
        };
    },
    watch:
        obj: {
            handler: function(newVal, oldVal) {
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
};
</script>

When monitoring an object, you need to add deep:true so that you can monitor it in real time at the bottom layer. If you don’t add it, the object will not be able to monitor changes.

immediate attribute: Boolean value
immediate: true: monitor data changes when loading for the first time
immediate: false: listen only when changes occur

deep:true;

It turns on deep listening, that is, listeners are added to all attributes, and the handler function is executed if one of them changes.

This is the end of this article about the detailed case of Vue's monitoring method. For more relevant Vue's 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!