在 Vue Options API 中，深度监听复杂对象需显式设置 deep: true；精准监听可用字符串路径（如 'user.profile.avatar'）；需初始化执行时添加 immediate: true；注意数组响应式限制及性能优化。
在 Vue Options API 中，要深度监听一个复杂对象（比如嵌套对象或数组）的内部属性变化，不能只靠直接写 watch: { obj: handler }——因为默认只检测引用是否改变，内部字段改了不会触发。必须显式启用 deep: true，并配合正确的写法。
基础写法：监听整个对象 + deep: true
这是最直接、兼容性最好的方式，适用于需要响应对象任意层级变动的场景。
- 在
watch选项中，将对象名作为键，值是一个配置对象，包含handler和deep: true -
handler回调接收新旧值，注意：oldVal和newVal可能是同一引用，内容变了但地址没变，做差异判断时建议用深比较（如JSON.stringify(oldVal) !== JSON.stringify(newVal)） - 示例：
user: {
handler(newVal, oldVal) {
console.log('user 任意属性变了', newVal);
},
deep: true
}
}
精准监听：用字符串路径监听特定嵌套字段
如果只关心某个固定路径（如 user.profile.avatar 或 list[0].name），推荐用字符串路径写法，轻量且语义清晰，无需开启 deep。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 直接在
watch对象里写带点号的路径字符串，Vue 会自动解析并建立响应式依赖 - 支持数组索引（如
'items.0.name'），但不支持动态索引（如'items.' + index + '.name'） - 示例：
'user.profile.avatar'(newVal, oldVal) {
console.log('头像地址变了', newVal);
}
}
初始化就执行：加上 immediate: true
有些逻辑既要响应初始值（组件挂载时），也要响应后续变更，比如表单校验、状态同步。
立即学习“前端免费学习笔记（深入）”；
- 在配置对象中同时加
immediate: true，回调会在组件创建后立即以当前值执行一次 - 可在回调里通过
oldVal === undefined判断是否为首次触发 - 示例：
user: {
handler(newVal, oldVal) {
if (oldVal === undefined) {
console.log('初始化 user:', newVal);
} else {
console.log('user 更新了');
}
},
deep: true,
immediate: true
}
}
避开常见坑
不是所有“改了没触发”都是 deep 没开对，有些是机制理解偏差。
- 数组用
push/pop/splice会触发监听（即使没开deep），但直接赋值索引（arr[0] = x）或改length不会响应，需用this.$set(arr, 0, x)或替换整个数组 - 监听 props 里的对象？确保父组件传的是响应式数据，且子组件用
deep: true或字符串路径监听 - 性能敏感场景慎用
deep: true监听大型对象，优先考虑用computed提取关注字段再监听
