推荐用函数式 getter 监听具体路径，如 watch(() => user.profile.address.city, (newval, oldval) => {...})；监听多个字段可传数组；仅当需监听任意子属性时才用 deep: true；复杂路径建议先用 computed 封装。
直接用函数式 getter 监听具体路径，是最准、最轻、最推荐的方式。
用箭头函数精准监听某一层级字段
Vue 3 的 watch 不会自动追踪对象内部属性变化，但只要你把访问逻辑写成响应式 getter 函数，它就能准确捕获该路径的变更，并正确提供 oldValue 和 newValue。
- 比如监听
user.profile.address.city：
watch(() => user.profile.address.city, (newVal, oldVal) => {
console.log('城市从', oldVal, '变成', newVal);
});
- 注意不能写成
watch(user.profile.address, ...)——那只是监听address对象的引用是否被替换，内部属性改了不会触发； - 必须用
() => ...显式读取到底层值，Vue 才能建立精确依赖链。
监听多个深层字段组合
如果几个关键嵌套字段（如 user.name 和 user.status）任一变化都要响应，可以把它们包装成数组传入：
watch(
[() => user.name, () => user.status],
([newName, newStatus], [oldName, oldStatus]) => {
console.log('姓名或状态变了');
}
);
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 回调参数是两个数组，顺序一一对应；
- 依然保持路径级精度，不触发无关变更。
需要监听任意子属性时再考虑 deep: true
仅当你确实无法预知哪一层会变（比如整个表单对象随时可能动态增删字段），才启用深度监听：
watch(
() => user,
(newVal, oldVal) => {
console.log('user 或其任意嵌套属性变了');
},
{ deep: true }
);
-
deep: true会递归遍历所有嵌套属性，性能随对象复杂度上升； -
oldVal和newVal可能指向同一对象，内容变了但引用没变，做对比需用深比较（如JSON.stringify）； - 不推荐对大型或结构不稳定的 JSON 对象无脑开启。
复杂路径建议先用 computed 提取
如果路径很深、带可选链或逻辑判断（比如 user?.profile?.avatar || defaultImg），先封装成计算属性再监听，更清晰、易复用、也天然防抖：
const avatarUrl = computed(() => user?.profile?.avatar || '/default.png');
watch(avatarUrl, (newUrl) => { /* 处理头像变更 */ });
- 避免在
watch回调里重复写冗长路径或空值判断； - 计算属性的缓存机制还能减少不必要的触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
