How to use watch in Vue to monitor changes in multiple data

Vue is a popular JavaScript framework that provides a very useful data binding mechanism. The watch object in Vue is a very important feature, it can help us monitor changes in single or multiple data. This article will discuss how to use watch objects in Vue to monitor changes in multiple data.

First of all, we need to understand what the watch object in Vue is. The watch object is an option used in Vue components to monitor data changes. We can use the watch option to observe the value of an expression. When the value of the expression changes, watch will automatically execute the corresponding callback function. In Vue, we can specify the watch object as a string, a function or an object. In this article, we will use an object to specify watch options.

Suppose we have a Vue component that contains two data properties: message and count. We want to listen for changes in these two data and update the corresponding elements on the page. First, we need to add a watch object in the component's options:

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  },
  template: '<div>{{ message }} {{ count }}</div>'
})

In the above code, we add a watch object in the Vue component's options. This watch object has two attributes, corresponding to the message and count data attributes respectively. Each property has an anonymous function as its value. These two functions will be called whenever the corresponding data attribute changes. Both functions accept two parameters: the new value and the old value. We can execute any code we want within these functions. In the above example, we simply print a message to the console.

We can also use the depth watch option to monitor multiple layers of data. Deep monitoring in Vue means that the watch callback will only be triggered when the value of an object or array property changes. In Vue, by default, only one layer of data changes can be detected. If you need to monitor changes in multi-layer data in the watch object, you need to add the depth character ($) to the attribute name.

Vue.component('my-component', {
  data: function () {
    return {
      person: {
        name: 'Bob',
        age: 30
      }
    }
  },
  watch: {
    'person.name': {
      handler: function (newVal, oldVal) {
        console.log('person.name changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    },
    'person.age': {
      handler: function (newVal, oldVal) {
        console.log('person.age changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    }
  },
  template: '<div>{{ person.name }} {{ person.age }}</div>'
})

In this example, we monitor changes in the name and age attributes of the person object. Since the person object is a nested object, we need to add a depth character before the attribute name so that Vue can deeply monitor changes in these attributes.

In this article, we introduce how to use watch objects in Vue to monitor changes in multiple data. We discussed how to use the watch option to observe changes in a single piece of data, and how to use the deep watch option to observe changes to an object or array property. In Vue, watch is a very practical feature, which allows us to easily monitor data changes and perform corresponding operations.

The above is the detailed content of How to use watch in Vue to monitor changes in multiple data. For more information, please follow other related articles on the PHP Chinese website!