Detailed explanation of Vue monitoring attribute graphic example

What is the listener property?

🥰The so-called monitoring is to monitor the status or property changes of built-in objects and respond to them. Monitoring properties means that you can monitor changes in other data.

What is the difference between listening properties and calculating properties?

Computed properties are cached and the results are recalculated and the DOM is updated after the dependent value changes.

The property monitors the property value, and when the defined value changes, the corresponding function is executed.

The main difference in usage:

Computed properties cannot perform asynchronous tasks. Computed properties are generally not used to request servers or perform asynchronous tasks, because this may take a long time, and our calculated properties need to be updated in real time. So this asynchronous task can be done using the listening property.

In a word: What computed can achieve, watch can achieve, and what computed cannot achieve, watch can also achieve

Use of monitoring properties

Use the watch configuration item and write the property to be monitored in the configuration item. Each change in the property value will trigger the handler function callback. You can also monitor changes in calculated properties.

example:

Monitor changes in the input box

Code

<template>
<div class="main">
    Me: <el-input v-model="name" placeholder="Please enter your name"></el-input>
    Friend 1<el-input v-model="friends.friend_1" placeholder="Please enter your name"></el-input>
    Friend 2<el-input v-model="friends.friend_2" placeholder="Please enter your name"></el-input>
</div>
</template>

<script>
export default {
  data(){
    return {
      name:'Romantic Coder',
      friends:{friend_1:'张三',friend_2:'李四'}
    }
  },
  watch:{
    name:{
      handler(newValue,oldValue){ //newValue new value, oldValue value before change console.log(newValue,oldValue)
        this.friends.friend_1='Wang Wu'
      }
    },
    //Monitor the change of a certain attribute in the multi-level structure 'friends.friend_1':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>

Deep Monitoring

When our object has a multi-layer structure, we need to monitor many properties of the object, and avoid writing each property separately. At this time, deep monitoring is used.

In the watch configuration, in the monitoring property object, set deep to true to monitor changes in values ​​within multi-level objects or arrays.

 watch:{
    //Monitor the changes of all attributes in the multi-level structure friends:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue,"aa")
      },
      deep:true, //enable deep monitoring}
  }

Note: There is a problem here. When deep monitoring occurs, the new and old values ​​will be the same?

reason:

Official explanation:

When mutating (not replacing) an object or array, the old value will be identical to the new value, since their references point to the same object/array. Vue does not keep a copy of the value before mutation

This causes the pointer to change. In my article "Do You Know How to Deep Copy JS?", I talked about data storage.

Call now

Same as deep configuration location.

immediate Set to true to trigger the current handler callback immediately

  watch:{
    name:{
      handler(newValue,oldValue){ //newValue new value, oldValue value before change console.log(newValue,oldValue)
        this.friends.friend_1='Wang Wu'
      },
      immediate:true
    },
  }

It is executed once when the page is loaded, so the old data is undefined

Final Thoughts

The watch listening property can usually be used to persist data, dispatch events and execute synchronously/asynchronously, verify the format...

This is the end of this article about Vue listening properties. For more relevant Vue listening properties, 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!