Summary of how to use watch in Vue

This time I will bring you a summary of how to use watch in Vue. What are the precautions when using watch in Vue. The following is a practical case, let’s take a look.

Assume the following code:

<p>
   <p>FullName: {{fullName}}</p>
   <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
  firstName: 'Dawei',
  lastName: 'Lou',
  fullName: ''
 },
 watch: {
  firstName(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  }
 } 
})

The effect of the above code is that when we enter firstName, wacth monitors the new value of each modification and then calculates and outputs fullName.

Handler method and immediate attribute

One feature of watch here is that it will not be executed when it is initially bound, and the monitoring calculation will not be executed until firstName changes. So what if we want to execute the change when it is initially bound? We need to modify our watch writing method. The modified watch code is as follows:

watch: {
 firstName: {
  handler(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  },
  // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
  immediate: true
 }
}

Have you noticed the handler? We have bound a handler method to firstName. The watch method we wrote before is actually written by default. This handler, Vue.js will handle this logic, and the final compiled version is actually this handler.

And immediate: true means that if firstName is declared in wacth, the handler method inside will be executed immediately. If it is false, the effect will be the same as our previous one, and it will not be executed during binding. implement.

deep attribute

There is also an attribute deep in watch. The default value is false, which represents whether to monitor deeply. For example, there is an obj attribute in our data:

<p>
   <p>obj.a: {{obj.a}}</p>
   <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
  obj: {
   a: 123
  }
 },
 watch: {
  obj: {
   handler(newName, oldName) {
     console.log('obj.a changed');
   },
   immediate: true
  }
 } 
})

When we entered the data view in the input box to change the value of obj.a, we found that it was invalid. Due to modern JavaScript limitations (and the deprecation of Object.observe), Vue cannot detect the addition or removal of object properties. Since Vue performs the getter/setter conversion process on the property when initializing the instance, the property must exist on the data object in order for Vue to convert it so that it is responsive.

By default, the handler only monitors changes in the reference of the obj attribute. It will only listen when we assign a value to obj, such as when we mounteventReassign obj in the hook function:

mounted: {
 this.obj = {
  a: '456'
 }
}

In this way, our handler will be executed and obj.a changed will be printed.

On the contrary, what if we need to monitor the value of attribute a in obj? This is when the deep attribute comes in handy!

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep: true
 }
}

deep means in-depth observation. The listener will traverse layer by layer and add this listener to all properties of the object. However, the performance overhead will be very large. Any modification of obj Any attribute inside will trigger the handler in this listener.

Optimization, we can use stringform monitoring.

watch: {
 'obj.a': {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  // deep: true
 }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Nodejs log module winston usage summary

##vue vue-router vuex operation permissions

The above is the detailed content of Summary of how to use watch in Vue. For more information, please follow other related articles on the PHP Chinese website!