Vue3中watch监视reactive对象方法详解

在Vue3中，使用watch监视reactive对象时，需根据监视的目标选择合适的方法。以下是详细的步骤和说明：

1. 监视整个reactive对象

• 自动深度监视：直接监视reactive对象时，Vue3会默认启用深度监视，无需设置deep: true。

javascript

复制

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
  user: { name: 'Alice' }
});

// 监视整个state对象的变化
watch(state, (newState) => {
  console.log('State changed:', newState);
});

// 修改内部属性会触发回调
state.user.name = 'Bob'; // 触发

2. 监视基本类型属性

• 使用Getter函数：对于基本类型（如count），使用Getter函数确保正确追踪。

javascript

复制

watch(() => state.count, (newCount, oldCount) => {
  console.log(`Count changed: ${oldCount} → ${newCount}`);
});

state.count++; // 触发，输出: Count changed: 0 → 1

3. 监视对象类型属性

• 需要深度监视：使用Getter函数返回对象属性，并显式设置deep: true以检测内部变化。

javascript

复制

watch(
  () => state.user,
  (newUser, oldUser) => {
    console.log('User changed:', newUser);
  },
  { deep: true } // 启用深度监视
);

state.user.name = 'Charlie'; // 触发

• 替换对象时触发：即使未设置deep: true，替换整个对象也会触发。

javascript

复制

watch(() => state.user, (newUser) => {
  console.log('User replaced:', newUser);
});

state.user = { name: 'David' }; // 触发

4. 注意事项

• 旧值问题：深度监视时，newValue和oldValue指向同一对象，需通过其他方式获取旧值。

• 直接监视响应式属性：避免直接监视属性（如watch(state.user, ...)），可能导致替换后失效。

总结

• 整个对象：直接监视，自动深度。

• 基本属性：使用Getter，无需deep。

• 对象属性：使用Getter + deep: true检测内部变化。

通过合理选择监视方式，可以高效追踪reactive对象及其嵌套属性的变化。