Summary of usage of watch in vue

In vue, watch is used to respond to changes in data. There are roughly three uses of watch.

1. Common usage

<input type="text" v-model="name"/>
new Vue({
 el: '#app',
 data: {
  name: ' Salted fish '
 },
 watch: {
  name(newVal,oldVal) {
   // ...
  }
 } 
})

Write a listening processing function directly, and execute the function every time the name value changes. You can also add the method name in string form directly after the monitored data:

watch: {
  name: 'nameChange'
 } 

2. Execute now (immediate and handler)

The first usage watch has one characteristic, that is, when the value is bound for the first time, the listener function will not be executed, and only when the value changes will it be executed. The immediate attribute is needed if we need to execute the function when we first bind the value.
For example, when the parent component dynamically passes values to the child component, when the child component props gets the default value from the parent component for the first time, it also needs to execute the function, so it is necessary to set immediate to true.

new Vue({
 el: '#app',
 data: {
  name: ''
 },
 watch: {
  name: {
   　　 handler(newVal,oldVal) {
    　　 // ...
   　　 },
   　　 immediate: true
  }
 } 
})

The monitored data is written in the form of objects, including handler method and immediate. The function we wrote before is actually writing this handler method;

immediate indicates whether to execute handler when binding in watch for the first time. If the value is true, it means to execute handler method immediately when declaring in watch. If the value is false, it uses watch1 as well as 1, and only executes handler when the data changes.

3. Deep listening

When it is necessary to monitor the change of complex data type (object), the ordinary watch method cannot monitor the change of internal attributes of the object, and only the data in data can monitor the change, so deep attribute is needed to monitor the object deeply.

<input type="text" v-model="person.name"/>
new Vue({
 el: '#app',
 data: {
  person: {id: 1, name: ' Salted fish '}
 },
 watch: {
  person: {
   handler(newVal,oldVal) {
   // ...
  },
  deep: true,
  immediate: true
  }
 } 
})

Setting deep: true can listen to the change of person. name. At this time, this listener will be added to all attributes of person. When there are many attributes of the object, handler will be executed for each attribute value change. If you only need to listen for one property value in an object, you can do the following optimization: Listen for object properties in the form of strings:

watch: {
  'person.name': {
   handler(newVal,oldVal) {
   // ...
   },
   deep: true,
   immediate: true
  }
 }

This only adds a listener to a specific property of the object.

Array (1-dimensional, multi-dimensional) changes do not require deep listening, while property changes of objects in object array require deep deep listening.

The above is the watch usage summary in vue details, more information about vue watch usage please pay attention to other related articles on this site!