In-depth understanding of watch usage in vue.js

The content of this article is to share with you an in-depth understanding of watch usage in vue.js. It has a certain reference value. Friends in need can refer to it

watch :

Observe the data changes on the Vue instance, corresponding to an object.
Key: It is the thing that needs to be monitored.
Value:

1. It can be the current The function executed when the key changes has two parameters, the first is the value before the change, and the second is the value after the change.
2. It can be a function name, which must be wrapped in single quotes.
3. It can be an object. This object has three options:
(1) handler: a callback function, a function that should be executed when changes are detected.
(2) deep: boolean value, whether to monitor deeply. (Generally, changes in object attribute values ​​cannot be heard during monitoring, but changes in arrays can be heard)
(3) Immediate: boolean value, whether to execute the handler function immediately.

Three situations of watch:

1. Ordinary watch:

    el:'#app',
    data:{
        meter:1000,
        kilameter:1
    },
    watch:{
        meter:function(val){
            this.kilameter = val * 0.1;
        },
        kilameter:function(val){
            this.meter = val *1000;
        }
    }
})

2. Array watch:

    el:'#app',
    data:{
        arr:[1,2,3]
    },
    watch:{
        arr:function(oldV,newV){
            console.log(oldV);
            console.log(newV);      
        }
    }
})

3. Object watch:

    el:'#app',
    data:{
        obj : {
            a:111,
            b:222
        }   
    },
    watch:{
        obj:{
            handler:function(oldV,newV){
                console.log(oldV);
            },
            deep:true
        }
    }
)

                   

Related recommendations:

VueJs Exploration Watch usage detailed explanation

VueJs $watch() method summary!!

The above is the detailed content of In-depth understanding of watch usage in vue.js. For more information, please follow other related articles on the PHP Chinese website!