Vue's watch provides three advanced options: deep, immediate and flush to enhance listening capabilities. 1. deep: true can listen to internal changes of objects or arrays, suitable for scenarios where attribute changes are required, but it will bring performance overhead; 2. immediate: true can execute a callback immediately during initialization, suitable for processing based on the initial value; 3. flush controls the timing of callback triggering, 'pre' is executed before rendering, 'post' is executed after rendering, and defaults to 'post', which is used to access the updated DOM or process data in advance. Use these options reasonably to improve code efficiency and logical clarity.

Vue's watch is a very practical tool to observe changes in responsive data and process them accordingly. However, in actual development, using only basic watch may encounter some limitations, such as being unable to listen for internal changes in the object, hoping to trigger a callback during initialization, etc.

At this time, you need to use several advanced options provided by Vue: deep , immediate and flush . Let’s talk about the functions and usage scenarios of these parameters.

1. deep: true — listen for deep changes in objects or arrays

When you want to listen for changes in an object or array, a normal watch will only be triggered when the entire object is replaced, and will not react to changes in the internal properties of the object.

For example:

 data() {
  return {
    user: {
      name: 'Tom',
      age: 25
    }
  }
}

If you only write:

 watch: {
  user(newVal, oldVal) {
    console.log('user changed');
  }
}

That will only be triggered when the entire user object is replaced with another object. If you want to listen for changes in user.name or user.age , you need to add deep: true :

 watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user object or its properties changed');
    },
    deep: true
  }
}

In this way, no matter which property in the object changes, a callback will be triggered.

?? Note: Turning on deep will bring certain performance overhead, especially when the object is large or the structure is very complex, so it is recommended to use it as needed.

2. immediate: true — execute a callback immediately during initialization

Sometimes you hope that the watch callback function can be executed immediately when the component is created. For example, you want to do some logical processing based on the initial value, rather than wait until it changes before triggering.

For example:

 watch: {
  searchQuery: {
    handler(newVal) {
      console.log('Searching for:', newVal);
    },
    immediate: true
  }
}

In this example, the component will execute handler once it is loaded, and the current searchQuery value is passed in.

This method is very suitable for initializing operations that depend on a responsive variable.

3. flush: 'pre' | 'post' —— Control the callback triggering timing

Vue's responsive system is updated asynchronously, that is, when you modify the responsive data, the DOM update does not happen immediately, but is "queued" to process.

By default, the callback of watch is executed after the "queue" processing is completed (that is, after the DOM is updated). But you can change this behavior by flush :

• 'pre' : The callback will be executed before rendering
• 'post' : The callback will be executed after rendering (this is the default value)

Examples of applicable scenarios:

• If you want to access the updated DOM element in watch , it should be set to 'post'
• If you do not want to wait for DOM updates and want to process data as soon as possible, you can set it to 'pre'

Example:

 watch: {
  selectedId: {
    handler(newId) {
      this.fetchDetails(newId);
    },
    flush: 'post'
  }
}

This ensures that the relevant DOM has been updated before obtaining the details.

Let’s summarize a few key points:

• Use deep: true to listen for internal changes in objects/arrays
• Use immediate: true to execute a callback immediately during initialization
• Use flush to control whether the callback is executed before or after rendering
• Each option has applicable scenarios, do not blindly stack and avoid unnecessary performance losses

Basically that's it. Although these options seem simple, they can make the code more concise and clearer when used in actual projects.

The above is the detailed content of Advanced Vue Watcher Options: deep, immediate, flush. For more information, please follow other related articles on the PHP Chinese website!