Listeners are typically used to listen for changes in data and are executed by default when the data changes.

The name of the listening data is put in here as the name of the function, which takes two arguments, one for the new value and one for the old value.

In VUE, watch is used to respond to data changes, and there are roughly three usages of watch.

1. The following code is a simple use of watch

<div id="app"> <input type="text" v-model="firstName" /> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm=new Vue({ el:"#app", Data :{firstName:" zhang "}, watch:{firstName: (newVal,oldVal){//firstName is the name of the function you want to listen on, and use the name of the function you want to listen on. Console. log({newVal,oldVal}); // {newVal: "Chen ", oldVal:" chang "}} FirstName: 'nameChange'}, methods:{nameChange(){}}}) vm.firstName = "old"; // change the listening value </script>Copy the code

2. Immediate Listen immediately

One feature of the basic use of Watch is that when a value is first bound, the listener function is not executed, but only when the value changes. We need the immediate attribute if we need to execute the function when we first bind the value. watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, { immediate: true } } }Copy the code

The handler method and the immediate handler method are used to write the listener data in object form.

3. Handler method

<div id="app"> <div> <p>Number: {{ myNumber }}</p> <p>Number: <input type="text" v-model.number="myNumber"></p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { myNumber: 'Dawei' }, watch: { myNumber: { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); }, // if immediate is true, the callback function is triggered immediately; If false, as in the above example, the callback is not executed immediately. Immediate: true}}}) </script> // The handler method is what you need to execute in your watchCopy the code

4. The deep attribute

How do we listen for objects or properties in objects? So, the deep property. Its role is the key to solving this problem.

<div id="root">
    <p>obj.a: {{obj.a}}</p>
    <p>obj.a: <input type="text" v-model="obj.a"></p>
</div> 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    new Vue({
        el: '#root',
        data: {
            obj: {
                 a: 123
            }
        },
        watch: {
            obj: {
            handler(newName, oldName) {
                console.log(newName, oldName);
            },
            immediate: true,
            deep:true
            }
        } 
})
</script>
Copy the code

If deep:true is not added to the above code, the console will not execute it, only the first time, and the output will be undefined

By default, the handler only listens for changes to the obj property and its reference, and it only listens when we assign a value to obj.

At this point, you can use deep to drill down and add the listener to all the attributes of the object, but this is too expensive