Vue watch 默认不监听嵌套属性变化，需监听顶层对象并配置 deep: true；初始化需定义完整结构，避免动态添加非响应式字段；推荐用 watchEffect 自动追踪依赖。
Vue 的 watch 默认不监听嵌套对象内部属性的变化，只检测对象引用是否改变。比如 obj.user.name = '张三' 不会触发监听，除非你明确告诉 Vue：要深入追踪每一层。
必须监听顶层响应式对象，并启用 deep: true
不能写成 watch(() => obj.user.name, ...) 或字符串形式 'obj.user.name' 并加 deep: true —— 这种写法无效，因为中间路径（如 obj.user）可能不是响应式代理对象。
- ✅ 正确做法：监听整个
obj，并显式配置{ deep: true } - 组合式 API 示例：
watch(() => obj, (n, o) => { /* 处理任意层级变化 */ }, { deep: true }) - 选项式 API 示例：
watch: { obj: { handler() { /* ... */ }, deep: true } }
初始化结构要完整，避免中途新增非响应式字段
Vue 的响应式系统无法自动追踪动态添加的属性（如 obj.newField = {}），除非该字段从一开始就存在于 reactive 或 ref 初始化中。
- 推荐初始化时定义好嵌套结构：
const obj = reactive({ user: { profile: { name: '', age: 0 } } }) - 若需后期扩展，可用
nextTick后重新赋值整个子对象，或用ref包裹深层对象再嵌套 - 避免直接替换某一层：
obj.user = { profile: { name: '李四' } }会丢失响应性；应逐层修改已有响应式属性
更轻量、更精准的替代方案：watchEffect
Vue 3 推荐用 watchEffect 替代手动配置 deep: true，它会自动追踪回调中「读取」到的响应式路径。
立即学习“前端免费学习笔记（深入）”；
- 示例：
watchEffect(() => console.log(obj.user?.profile?.name)) - 可选链
?.不影响依赖收集，前提是obj、user、profile都是响应式对象 - 适合关注特定路径的场景，性能优于
deep: true，也不会因无关变更误触发
数组中的嵌套对象也要注意操作方式
deep: true 能监听 arr[0].name = '新名字'，但对以下操作无效：
- 直接赋值越界索引：
arr[10] = newItem→ 改用arr.push()或arr.splice(10, 0, newItem) - 清空数组：
arr.length = 0→ 改用arr.splice(0) - 整数组替换：
arr = newArray→ 可以触发，但需确保仍指向原响应式引用（例如用ref包裹）
