Summary of the various usage methods of watch in Vue

Various uses of watch

1. Attributes: Method (most commonly used)

The most widely used method is towatchThe option is set to an object, the object's attribute is the data attribute to be observed, and the value is a callback function, which will be triggered when the attribute changes. For example:

<strong>watch: {
  firstName: function(newVal, oldVal) {
    ('firstName changed:', newVal, oldVal);
  }
}</strong>

2. Properties: Array

You can do it in onewatchObserve multiple data attributes in the option, which can be achieved by placing the attributes to be observed into an array. For example:

<strong>watch: {
  '': function(newVal, oldVal) {
    ('firstName changed:', newVal, oldVal);
  },
  '': function(newVal, oldVal) {
    ('lastName changed:', newVal, oldVal);
  }
}</strong>

3. Properties: Object

Another way to observe multiple properties is to use objects. In this case, the key of the object is the property to be observed, and the value is an object containing the processing function and handler.

This handler function is the same as the callback function for property values ​​and is used to execute logic in the component when property changes. It can also include other options, such asdeepandimmediate. For example:

<strong>watch: {
  person: {
    handler: function(newVal, oldVal) {
      ('person changed:', newVal, oldVal);
    },
    deep: true
  }
}</strong>

4. Properties: String

You can also use a string to specify the attribute to observe and then use the corresponding method name as the callback function. This option is very useful when there is only one property to observe. For example:

<strong>watch: {
  '': 'firstNameChanged'
},
methods: {
  firstNameChanged: function(newVal, oldVal) {
    ('firstName changed:', newVal, oldVal);
  }
}</strong>

5. Watch with namespace

watchThe attribute to be observed can be represented by strings in the options..to access properties in the object, such as'', but this will cause the processing function to be closely coupled with the property name, which is inconvenient for maintenance.

To solve this problem, Vue provides a watch usage with namespace, which can be done bywatchObjects are used in the options.

Each key of an object represents an observed namespace, and the value is the processing function for observing properties under this namespace. For example:

<strong>watch: {
  person: {
    firstName: function(newVal, oldVal) {
      ('firstName changed:', newVal, oldVal);
    },
    lastName: function(newVal, oldVal) {
      ('lastName changed:', newVal, oldVal);
    }
  }
}</strong>

Here we canpersonObject specifies two namespaces—firstNameandlastNameThese namespaces are consideredpersonThe subnamespace of the hierarchy.

6.$watch

Except in component optionswatchIn addition to properties, Vue also allows you to use instance methods$watchto achieve the same effect.

Set with Component OptionswatchDifferent options, call$watchcan be used anywhere, such as in computed properties, methods, or any other instance method. For example:

<strong>created() {
  this.$watch('', function(newVal, oldVal) {
    ('firstName changed:', newVal, oldVal);
  })
}</strong>

7. Depth observation

By default,watchOnly the changes in the first layer of the object's attributes will be observed. This means that when changing properties in the nested hierarchy of an object, the processing function is not triggered. To observe the deep properties of an object, you canwatchUse in the optionsdeepProperties, as shown below:

<strong>watch: {
  '': {
    handler: function(newVal, oldVal) {
      ('name changed:', newVal, oldVal);
    },
    deep: true
  }
}</strong>

In this example, we observepersonThe object'snameProperties, usedeep: trueOptions can still trigger processing functions when changing properties in the object's deep hierarchy.

To sum up, Vue'swatchOptions provide multiple ways to observe changes in data properties, allowing us to write more elegant and more maintainable code.

This is the end of this article about the various methods of using watch in Vue. For more related content on using vue watch, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!