中国空间站研究项目推广方案模板
在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对象及其嵌套属性的变化。