Vue listens for properties

This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

What are listening properties?

🥰 The so-called listener is the response that listens and responds to the state or property changes of built-in objects. The listener property means that changes in other data can be monitored.

What’s the difference between a listening property and a calculated property?

The calculated property is dependent on the value of the changed recalculated result to update the DOM, which will be cached.

Properties listen for property values, and when the defined value changes, the corresponding function is executed.

The main usage difference: Computed properties cannot perform asynchronous tasks. Computational properties are not usually used to make requests to the server or perform asynchronous tasks, because it can be time-consuming and our computational properties are updated in real time. So the asynchronous task can be done with the listener property.

In a word, watch can do what it can do with computed, and what it can’t do with computed

Listen for the use of properties

Use the Watch configuration item to write the property to be monitored in the configuration item. Each change in the value of the property will trigger the handler function callback, and you can also monitor the change of the calculated property.

Example:

Monitor input box changes

code

<template>
<div class="main">I:<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>Friends 2<el-input v-model="friends.friend_2" placeholder="Please enter your name"></el-input>
</div>
</template>

<script>
export default {
  data(){
    return{
      name:'The Romantic code farmer'.friends: {friend_1:'Joe'.friend_2:'bill'}}},watch: {name: {handler(newValue,oldValue){  //newValue specifies the newValue, oldValue specifies the value before the change
        console.log(newValue,oldValue)
        this.friends.friend_1='Cathy'}},// Monitor changes to an attribute in a multilevel structure
    'friends.friend_1': {handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2': {handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>
Copy the code

The depth of the listening

When our object has a multi-layer structure, we need to listen for many attributes of the object, avoid writing a single attribute, this is used in depth listening.

In the Watch configuration, in the monitor property object, the deep configuration is set to true to listen for changes in values inside multilevel objects or arrays

 watch:{
    // Monitor all attribute changes in the multilevel structure
    friends: {handler(newValue,oldValue){
        console.log(newValue,oldValue,"aa")},deep:true.// Enable deep listening}}Copy the code

Note: there is a problem here. When deep listening, the old and new values will be the same phenomenon.

The reason:

The official explanation: When mutating (not replacing) an object or array, the old value will be the same as the new value because their references refer to the same object/array. Vue does not keep a copy of the value before the mutation, which causes the pointer to change. In my JS deep copy you will not be able to talk about data storage in the article

Immediately call

Same as deep configuration.

Immediate Set to true immediately triggers the current handler callback

  watch:{
    name: {handler(newValue,oldValue){  //newValue specifies the newValue, oldValue specifies the value before the change
        console.log(newValue,oldValue)
        this.friends.friend_1='Cathy'
      },
      immediate:true}},Copy the code

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

Write in the last

The Watch listener property is typically used for data persistence, event dispatch and synchronous/asynchronous execution, validation formats…

Above error, welcome big guy comment points out.

💌 at that time the moon in, once according to the colorful clouds to 💌

A romantic universe, but also cherish the world’s daily code farmers