快捷導(dǎo)航

Vue3監(jiān)聽reactive對象中屬性變化的方法

更新時間：2024年08月30日 10:40:12 作者：方周率

在 Vue 3 中,如果你想監(jiān)聽 reactive 對象中的某個屬性發(fā)生的變化,你可以使用 watch 函數(shù)進(jìn)行監(jiān)聽,watch 函數(shù)允許你觀察 reactive 對象的某個屬性或者整個對象,所以本文給大家介紹了Vue3監(jiān)聽reactive對象中屬性變化的方法,需要的朋友可以參考下

1. 監(jiān)聽 reactive 對象的某個屬性

如果你只想監(jiān)聽 reactive 對象的某個特定屬性，可以直接在 watch 中傳入該屬性。

import { reactive, watch } from 'vue';

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

// 監(jiān)聽 name 屬性的變化
watch(() => state.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

2. 監(jiān)聽整個 reactive 對象并檢查是哪一個屬性發(fā)生了變化

如果你需要監(jiān)聽整個 reactive 對象，并確定到底是哪個屬性發(fā)生了變化，可以通過對整個對象進(jìn)行深度監(jiān)聽 (deep: true)，然后手動檢查哪個屬性發(fā)生了變化。

import { reactive, watch } from 'vue';

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

// 監(jiān)聽整個對象的變化
watch(
  state,
  (newValue, oldValue) => {
    for (const key in newValue) {
      if (newValue[key] !== oldValue[key]) {
        console.log(`${key} changed from ${oldValue[key]} to ${newValue[key]}`);
      }
    }
  },
  { deep: true } // 深度監(jiān)聽
);

3. 監(jiān)聽多個屬性

如果你需要監(jiān)聽多個特定的屬性，你可以使用多個 watch，或者通過組合使用 computed 進(jìn)行監(jiān)聽。

import { reactive, watch } from 'vue';

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

// 監(jiān)聽 name 和 age 屬性的變化
watch(
  () => [state.name, state.age],
  ([newName, newAge], [oldName, oldAge]) => {
    if (newName !== oldName) {
      console.log(`Name changed from ${oldName} to ${newName}`);
    }
    if (newAge !== oldAge) {
      console.log(`Age changed from ${oldAge} to ${newAge}`);
    }
  }
);

4. 使用 toRefs 進(jìn)行屬性監(jiān)聽

你可以將 reactive 對象的屬性轉(zhuǎn)換為 ref，然后使用 watch 監(jiān)聽這些 ref。

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

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

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

// 監(jiān)聽 name 屬性的變化
watch(name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

// 監(jiān)聽 age 屬性的變化
watch(age, (newValue, oldValue) => {
  console.log(`Age changed from ${oldValue} to ${newValue}`);
});

總結(jié)

監(jiān)聽單個屬性：使用 watch(() => state.name, ...) 監(jiān)聽特定屬性的變化。
監(jiān)聽整個對象：使用 watch(state, ...) 并結(jié)合 deep: true 深度監(jiān)聽整個對象，并手動檢查哪些屬性發(fā)生了變化。
監(jiān)聽多個屬性：可以通過數(shù)組或組合 computed 來監(jiān)聽多個屬性的變化。
使用 toRefs：將 reactive 對象的屬性轉(zhuǎn)換為 ref，然后分別進(jìn)行監(jiān)聽。