Detailed explanation of how to use watch in Vue? Introduction to watch usage

In vue, use watch to respond to data changes. There are roughly three ways to use 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 listening processing function directly, and execute the function every time the cityName value changes. You can also add the method name in the form of a string directly after the monitored data:

watch: {
    cityName: 'nameChange'
    }
 }

immediate and handler

When using watch like this One feature is that when the value is bound for the first time, the listening function will not be executed. 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 a parent component dynamically transfers a value to a child component, and the child component props first obtains the default value from the parent component, 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 later written in object form, including the handler method and immediate. The function we wrote before is actually writing this handler method;

immediate means when it is first bound in the watch , whether to execute the handler. If the value is true, it means that the handler method will be executed immediately when it is declared in the watch. If the value is false, it will be executed when the data changes, just like the normal watch.

deep

When it is necessary to monitor changes in an object, the ordinary watch method cannot monitor changes in the internal attributes of the object, only in the data Only the data can detect changes. At this time, the deep attribute is needed to deeply monitor the object.

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

Set deep: true to monitor changes in cityName.name. At this time, this listener will be added to all properties of cityName. When there are many properties in the object, changes in each property value will be executed. handler. If you only need to monitor one attribute value in the object, you can do the following optimization: use the string form to monitor the object attribute:

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

In this way, only a specific attribute of the object will be added with a listener.

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

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