vue3如何监听reactive对象是哪个属性发生的变化

devtools/2024/12/31 2:01:50/

在 Vue 3 中，如果你想监听 reactive 对象中的某个属性发生的变化，你可以使用 watch 函数进行监听。watch 函数允许你观察 reactive 对象的某个属性或者整个对象，并在变化时执行相应的操作。

1. 监听 `reactive` 对象的某个属性

如果你只想监听 reactive 对象的某个特定属性，可以直接在 watch 中传入该属性。

javascript">import { reactive, watch } from 'vue';const state = reactive({name: 'John',age: 30,location: 'New York',
});// 监听 name 属性的变化
watch(() => state.name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});

2. 监听整个 `reactive` 对象并检查是哪一个属性发生了变化

如果你需要监听整个 reactive 对象，并确定到底是哪个属性发生了变化，可以通过对整个对象进行深度监听 (deep: true)，然后手动检查哪个属性发生了变化。

javascript">import { reactive, watch } from 'vue';const state = reactive({name: 'John',age: 30,location: 'New York',
});// 监听整个对象的变化
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 } // 深度监听
);

3. 监听多个属性

如果你需要监听多个特定的属性，你可以使用多个 watch，或者通过组合使用 computed 进行监听。

javascript">import { reactive, watch } from 'vue';const state = reactive({name: 'John',age: 30,location: 'New York',
});// 监听 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` 进行属性监听

你可以将 reactive 对象的属性转换为 ref，然后使用 watch 监听这些 ref。

javascript">import { reactive, toRefs, watch } from 'vue';const state = reactive({name: 'John',age: 30,location: 'New York',
});const { name, age } = toRefs(state);// 监听 name 属性的变化
watch(name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});// 监听 age 属性的变化
watch(age, (newValue, oldValue) => {console.log(`Age changed from ${oldValue} to ${newValue}`);
});