Vue3 method to listen for property changes in reactive objects

In Vue 3, if you want to listen for changes in a property in a reactive object, you can use the watch function to listen. The watch function allows you to observe a certain property or the entire object of a reactive object and perform corresponding operations when it changes.

1. Listen to a certain property of a reactive object

If you only want to listen for a specific property of the reactive object, you can pass it in the watch directly.

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// Listen to the name attribute changeswatch(() => , (newValue, oldValue) => {
  (`Name changed from ${oldValue} to ${newValue}`);
});

2. Listen to the entire reactive object and check which attribute has changed

If you need to monitor the entirereactiveObject and determine which attribute has changed. You can deeply monitor the entire object (deep: true) and then manually check which attribute has changed.

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// Listen to the changes of the entire objectwatch(
  state,
  (newValue, oldValue) => {
    for (const key in newValue) {
      if (newValue[key] !== oldValue[key]) {
        (`${key} changed from ${oldValue[key]} to ${newValue[key]}`);
      }
    }
  },
  { deep: true } // In-depth monitoring);

3. Listen to multiple attributes

If you need to listen for multiple specific properties, you can use multiplewatch, or through combinationcomputedConduct monitoring.

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// Listen to changes in name and age propertieswatch(
  () => [, ],
  ([newName, newAge], [oldName, oldAge]) => {
    if (newName !== oldName) {
      (`Name changed from ${oldName} to ${newName}`);
    }
    if (newAge !== oldAge) {
      (`Age changed from ${oldAge} to ${newAge}`);
    }
  }
);

4. Use toRefs for attribute monitoring

You can putreactiveThe attributes of the object are converted toref, then usewatchListen to theseref。

import { reactive, toRefs, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

const { name, age } = toRefs(state);

// Listen to the name attribute changeswatch(name, (newValue, oldValue) => {
  (`Name changed from ${oldValue} to ${newValue}`);
});

// Listen to changes in age attributeswatch(age, (newValue, oldValue) => {
  (`Age changed from ${oldValue} to ${newValue}`);
});

Summarize

• Listen to a single attribute:usewatch(() => , ...)Listen to changes in specific attributes.
• Listen to the entire object:usewatch(state, ...)And combinedeep: trueDepth monitoring of the entire object and manually check which properties have changed.
• Listen to multiple attributes: It can be done through arrays or combinationscomputedTo listen for changes in multiple attributes.
• usetoRefs:WillreactiveThe attributes of the object are converted toref, and then monitor separately.

These methods can help you listen flexiblyreactiveThe property changes in the object and choose the appropriate method according to actual needs.

This is the article about how to listen to Vue3 to listen to property changes in reactive objects. For more related content on Vue3 to listen to reactive properties, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!