Vue watch默认不响应对象内部属性变化，需deep: true监听整个响应式对象；精准监听用getter函数或字符串路径；多字段监听可传数组；初始化结构须完整以确保响应性。
Vue 的 watch 默认只监听对象引用是否变化，比如 obj = { ... } 这种整体赋值才会触发；而 obj.user.name = '新名字' 这类内部属性修改，默认是**不响应**的。要让它响应，必须显式启用深度监听——也就是配置 deep: true，但关键在于「监听谁」和「怎么配」。
监听整个响应式对象（最稳妥）
这是最常用、兼容性最好、也最不容易出错的方式。你得把整个顶层响应式对象作为监听目标，再加 deep: true：
- 组合式 API：
watch(() => obj, (newVal, oldVal) => { /* 处理任意层级变化 */ }, { deep: true }) - 选项式 API：
watch: { obj: { handler(newVal, oldVal) { /* ... */ }, deep: true } }
⚠️ 注意：不能写成 watch(() => obj.user.name, ..., { deep: true }) 或字符串 'obj.user.name' 配 deep: true —— 中间路径（如 obj.user）若不是独立的响应式代理，Vue 就无法递归追踪，这种写法无效。
只监听某一层级的特定字段（更轻量）
如果只关心 obj.user.profile.name 这一个字段，没必要深度遍历整个对象。直接用 getter 函数监听该路径即可：
- 组合式 API：
watch(() => obj.user?.profile?.name, (newName, oldName) => { console.log(`姓名变了：${oldName} → ${newName}`) }) - 选项式 API：
watch: { 'user.profile.name'(newName, oldName) { /* ... */ } }
✅ 这种方式天然精准，不依赖 deep，性能更好，oldValue 和 newValue 也能准确拿到。
监听多个嵌套字段或组合条件
当需要同时响应几个关键字段（比如 obj.user.name 和 obj.status），可以把它们包装成数组传入：
watch(() => [obj.user?.name, obj.status], ([newName, newStatus], [oldName, oldStatus]) => { /* 对比变化 */ })
这样既避免了 deep: true 的全量扫描开销，又能按需捕获多个路径的变化，逻辑清晰、响应及时。
初始化结构要完整，否则监听会静默失效
deep: true 能监听已存在的嵌套属性，但对动态新增的字段无能为力。例如：
- ❌ 错误：初始化时
const obj = reactive({ user: {} })，之后再obj.user.profile = { name: '' }——profile不是响应式，改它不会触发 watch - ✅ 正确：一开始就定义完整结构：
const obj = reactive({ user: { profile: { name: '' } } })
如果必须后期扩展，建议用 nextTick 后整体替换子对象，而不是直接添加新属性。
