How to use watch for deep observation in Vue3

How to set the depth observation of watch in Vue 3?

In modern front-end development, it is a popular framework, especially its latest version of Vue 3. In Vue 3, an important feature iswatchOption, which allows developers to observe data changes. When you need to conduct in-depth observations of a complex object or array, configurewatchIt is an important link. This blog will introduce in detail how to use it in Vue 3watchConduct in-depth observation, especially when usingsetupChemical sugar when.

What is in-depth observation?

In Vue, deep observation refers to observing changes in the properties of an object. For example, suppose we have a user data object, and if we simply observe this object, the observer may not be triggered when we update one of its properties. To ensure that changes in all properties inside the object are responded to, we need to set up depth observations.

Use watch for in-depth observation

In Vue 3,watchis a responsive API that observes changes in ref or reactive objects and executes corresponding callback functions when they change. usesetupWhen syntactic sugar, we can easily conduct in-depth observations.

Basic examples

Here is a simple Vue 3 component example showing how to passwatchListen to changes in a responsive object.

<template>
  <div>
    <h2>User Information</h2>
    <label>
      Name:
      <input v-model="" />
    </label>
    <label>
      Age:
      <input v-model="" />
    </label>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const user = reactive({
  name: 'John Doe',
  age: 30,
});

// In-depth observation of user objectwatch(user, (newVal, oldVal) => {
  ('User information changed:', newVal);
}, {
  deep: true // Set to Depth Observation});
</script>

Code parsing

In the above code, we first importreactiveandwatchFunction and create a responsive objectuser。userObject containsnameandageTwo attributes, we passv-modelThe directive binds these two properties to the input box.

Next, we usewatchrightuserConduct observation. whenuserWhen any properties inside the object change, the provided callback function will be automatically executed, outputting new and old values. Here, we set updeep: trueTo achieve in-depth observation.

In-depth exploration

Assume we expanduserObject, add a nested property, such asaddress。

<template>
  <div>
    <h2>User Information</h2>
    <label>
      Name:
      <input v-model="" />
    </label>
    <label>
      Age:
      <input v-model="" />
    </label>
    <label>
      Address:
      <input v-model="" placeholder="Street" />
      <input v-model="" placeholder="City" />
    </label>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';

const user = reactive({
  name: 'John Doe',
  age: 30,
  address: {
    street: '',
    city: '',
  },
});

// In-depth observation of user objectwatch(user, (newVal, oldVal) => {
  ('User information changed:', newVal);
}, {
  deep: true
});
</script>

Detect when the input address field changes

In this extended example,userAn object has been addedaddressProperties, it is a nested object. We also usev-modelBind the address field to the input box. When the user enters the address information, in-depth observation will ensure that we can capture these changes and print them out in the console.

Things to note

• performance:Using deep observation can bring performance overhead, especially when changes frequently in large objects. Please use it with caution according to actual needs.
• Use scenarios: In-depth observation is suitable for scenarios where complex objects need to be monitored for changes. For simple data, it is possible to consider not using in-depth observations to improve performance.
• Multiple observers: You can set multiple objects for the same objectwatch, observe different attributes or scenarios.

Summarize

In Vue 3, bywatchAPI implementation of in-depth observation is very simple and intuitive. You just need tosetupDefine the object to be observed in the function and usewatchTo configure the callbacks for observing objects and their changes. In actual development projects, flexible use of this feature can greatly improve component responsiveness and user experience.

The above is the detailed content of Vue3's operation method for in-depth observation using watch. For more information about in-depth observation of Vue3 watch, please pay attention to my other related articles!