Detailed explanation of the use of watch in vue.js

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

There is a characteristic when using watch in this way, That is, 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 properties of the object. Only the data in data can be monitored. Change, 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 form of a string to monitor the object attribute:

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

This will only give a specific attribute of the object Add 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.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Detailed explanation of the use of watch in vue.js. For more information, please follow other related articles on the PHP Chinese website!