VUE watch Listener Basic Usage Detailed Explanation

Directory 1, the following code is a simple usage of watch 2, immediate immediate listening 3, handler method 4, deep attribute summary

Listener 1 is generally used to listen for changes in data, which is executed by default when data changes.

The name of the listening data is put into it as the function name. There are two parameters in this function, one is the new value and one is the old value.

In vue, watch is used to respond to data changes, and there are roughly three uses 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 That is, the name of the data you want to listen to, and the name of the function you want to listen to can be used by whoever you want to listen to   Such as monitoring v-model Adj. firstName                    
//newVal Represents the changed value, that is, the 1 Formal parameters, do not change positions 
//oldVal Represents the value before the change, 
            console.log({newVal,oldVal});   //  {newVal: " Chen ", oldVal: " Zhang "}
        }
        // Direct writing 1 A listening processing function, when every time you listen to cityName When the value changes, the function is executed. 
        // You can also add the method name in string form directly after the monitored data: firstName: 'nameChange'
    },
    methods:{
        nameChange(){
         }
    }
})
 vm.firstName = " Chen " ; // Change the value of listening 
</script>

2. immediate monitors immediately

The basic usage of watch has one characteristic, that is, when the value is bound for the first time, the listening function will not be executed, and only when the value changes will it be executed. The immediate attribute is needed 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 }
  }
}

The monitored data is written in the form of objects, including handler methods and immediate. The above simple writing method is actually to write this handler method, which is omitted by default.

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);
            },
            //immediate For true The callback function is triggered immediately; If is false And the example above 1 The callback will not be executed immediately. 
            immediate: true
          }
      }
 })
</script>
//handler The way is that you watch Methods that need to be implemented in 

4. deep Attribute

How do we listen to objects or properties in objects? Then the deep attribute is introduced. Its function is the key to solve 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>

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

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

At this time, you can use deep for in-depth observation. The listener will traverse down layer by layer, adding this listener to all attributes of the object, but it consumes too much.

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!