How to use watch in Vue-JS Tutorial-php.cn

How to use watch in Vue

php中世界最好的语言

Release： 2018-06-01 11:47:28

Original

1730 people have browsed it

This time I will show you how to use watch in Vue, and what are the precautions for 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;
  }
 } 
})

Copy after login

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
 }
}

Copy after login

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
  }
 } 
})

Copy after login

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 listens for changes in the reference of the obj attribute. It will only listen to it when we assign a value to obj. For example, we set obj in the mounted

event hook function. Reassign:

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

Copy after login

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
 }
}

Copy after login

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
 }
}

Copy after login

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!