Usage of listener watch in Vue

An attribute in the vue configuration object, the listening attribute, which responds to data changes. The data here refers to the data in data and computed, which is equivalent to monitoring data. When the data changes, it will immediately execute the corresponding in the listener The function. The listener watch is a property provided by Vue to observe and respond to data changes on the Vue instance. When the monitored data changes, the corresponding listening function will be triggered.

Listener-Vue Instance-CSDNVue Getting Started Skill Tree

watch:{
        key:value,
        //key值就是要侦听的数据名字
        //value:5种类型（最常用的也就是函数类型）
        } 

In Vue, use watch to respond to data changes. There are roughly three usages of watch. The following code is a simple usage of watch:

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  }
})

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

watch: {
    cityName: 'nameChange'
    }
 }

immediate and deals

There is a feature of using watch in this way, that is, when the value is bound for the first time, the monitoring function will not be executed, and it will only be executed when the value changes. If we need to execute the function when the value is initially bound, we need to use the immediate attribute.

For example, when the parent component dynamically passes values ​​to the child component, when the child component props obtains the default value from the parent component for the first time, it also needs to execute the function. At this time, immediate needs to be set to true.

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  }
})

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

immediate indicates whether to execute the handler when the watch is bound for the first time. The value is true, which means that when the watch is declared, the handler method is executed immediately. The value is false, which is the same as the general use of the watch. When the data changes Only execute the handler.

deep

When it is necessary to monitor the changes of an object, the ordinary watch method cannot monitor the changes of the internal properties of the object. Only the data in the data can monitor the changes. At this time, the deep property is needed to monitor the object in depth.

<input type="text" v-model="cityName.name"/>

new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  }
})

If you set deep: true, you can monitor the changes of cityName.name. At this time, this listener will be added to all the properties of cityName. When the object has many properties, the change of each property value will execute the handler. If you only need to monitor an attribute value in an object, you can do the following optimizations: Use strings to monitor object properties:

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

This will only add a listener to a specific property of the object.

Changes in arrays (one-dimensional and multi-dimensional) do not require deep monitoring, and changes in the properties of objects in object arrays require deep monitoring.