Understanding watch in Vue (especially immediate and deep properties)

$watch() [monitors] [monitors] the change of a certain value (two-way binding), once the change occurs, the method in the quotation marks is called, so as to achieve the effect of change event monitoring! !

First, confirm that watch is an object and must be used as an object. Objects have keys and values. 
Key: It is the guy you want to monitor, such as $route, this is to monitor the changes of the route. Or a variable in data. 
The value can be a function: it is the function that needs to be executed when the guy you are monitoring changes. This function has two formal parameters, the first is the changed value, and the second is the original value. 
The value can also be a function name: however, the function name should be enclosed in single quotes
The value is an object that includes options: options include three, as follows

  1. The first handler: its value is a callback function. That is, the function that should be executed when a change is detected.
  2. The second is deep: its value is true or false; confirms whether to listen deeply. (Generally, you cannot monitor changes in object property values, but you can hear changes in array values.)
  3. The third is immediate: its value is true or false; confirms whether to execute the handler’s function with the current initial value.

For immediate and deep, I have the following two understandings:

  1. After immediate is set to true, the monitored object will be output immediately, that is to say, it will be output on the console as soon as the page is refreshed. Of course, at this time, we have not had time to manually change the data on the page, so in the control The newValue output by the console is the value we set by default in the code, and the oldValue output is “undefined”. like

When we manually change the value of newValue.id, the output is as follows:

If immediate is not set, or immediate is set to false, the object will not be monitored immediately after refreshing the page, that is, the console will not have output, and the console will have output when the value of the object to be monitored changes.

  1. After deep is set to true, you can monitor deeply. To put it simply, it is possible to monitor the changes in the value of the object. For example, in the above example, the object is “student”, and the values ​​in this object are: id: 1 and studentName: ‘Li Jiang’, that is

Then we bind student.studentName in , as follows

Under normal circumstances, watch cannot directly monitor the studentName in the student object, that is to say, if the value of studentName is changed on the page, the console will not have any response. However, if we set deep to true and change the value of studentName on the page at this time, the console will output the value of studentName, that is, the studentName in the student object can be monitored. It seems a little round,

Let’s take a look at the running results:

Attached code:

<template>
  <div class="about">
    <!-- <h1>This is an about page</h1> -->
    <p>username:<input type="text" v-model="username"> {{username}}</p>
    <p>password:<input type="text" v-model="password"> {{password}}</p>
    <p>age:<input type="text" v-model="age"> {{age}}</p>
    <p>student.id:<input type="text" v-model="student.id"> {{student.id}}</p>
    <p>student.studentName:<input type="text" v-model="student.studentName"> {{student.studentName}}</p>

  </div>
</template>
<script>
export default {
  data(){
    return{
      username:'lijiang',
      password:'123',
      age:21,
      student:{
        id:1,
      }
    }
  },
  methods:{
     Test:function(newValue,oldValue){
           console.log('newValue:%s,oldValue:%s',newValue,oldValue);
     }
  },
  watch:{
    username:function(newValue,oldValue){
      console.log('username newValue:'+newValue+',username oldValue:'+oldValue);
    },

    password:'Test',

    age:{
      handler:function(newValue,oldValue){
        console.log('age newValue:'+newValue+',age oldValue:'+oldValue);
      },
      immediate : true  // will be executed when the page is refreshed for the first time
    },

    student:{
      handler:function(newValue,oldValue){
        console.log('student newValue.id:'+newValue.id+',student oldValue:'+oldValue);
      },
      immediate:true,
      deep:true
    },

    'student.studentName':'Test'
  }
}
</script>

Example 2 

Usage of watch-immediate attribute

Usage of watch-deep attribute

Leave a Comment

Your email address will not be published. Required fields are marked *