Vue组件更新需深度监听，因其默认仅对对象顶层属性响应；深层属性如profile.age未被读取则不触发更新，deep:true可递归建立所有嵌套属性的getter/setter以纳入依赖追踪。
组件更新时为什么需要深度监听
Vue 默认只对对象的顶层属性做响应式处理。比如 data 中定义了 user: { name: 'Alice', profile: { age: 25 } }，模板里只用了 {{ user.name }}，那么 profile.age 的变化就不会触发视图更新——因为它的 getter 没被收集为依赖。只有当某个嵌套属性在 render 过程中被读取过，它才进入响应式追踪链。深度监听的本质，是主动让 Vue 遍历整个对象树，把每一层属性都变成可响应的。
三种主流深度监听方式及适用场景
Vue 提供了多个入口开启深度监听，核心都是通过 deep: true 触发递归遍历：
- watch 选项中配置 deep：适合静态、明确要监听的对象，如表单数据或配置项。写法简洁，生命周期内自动管理。
- 使用 $watch API 动态注册：适用于运行时决定是否监听、或需手动销毁监听器的场景（比如切换不同数据源时）。
- 配合 Vue.set / this.$set 添加新属性：解决“对象新增属性不响应”的问题。注意：这不是监听策略本身，而是补全响应式能力的前提；若未用 $set 添加，即使 deep: true 也捕获不到该属性的变化。
深度监听的代价与优化建议
开启 deep: true 后，Vue 会在初始化 watcher 时递归遍历目标对象所有嵌套属性，为每个属性建立 getter/setter。这意味着：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 对象层级越深、属性越多，初始化开销越大；
- 每次数据变更都会触发更广范围的依赖通知，可能造成不必要的重新渲染；
- watch 回调中拿到的 newVal 和 oldVal 是同一引用，仅内容不同，不能靠 === 判断是否真变化。
建议：优先用计算属性（computed）替代深度 watch；若必须监听，尽量缩小监听粒度（例如监听 user.profile 而非整个 user），或结合防抖、条件过滤减少回调执行频率。
立即学习“前端免费学习笔记（深入）”；
更新流程中深度监听的实际作用点
深度监听不改变 Vue 渲染主流程，它只影响「依赖收集」和「派发更新」两个环节：
- 在初次 render 时，若未访问深层属性，它们不会进入依赖；deep: true 强制让这些路径也被纳入依赖树；
- 当 profile.city 被修改，setter 触发后，不仅通知 profile 的 watcher，还会通知所有标记为 deep 的父级 watcher（如监听 user 的那个）；
- 最终仍走标准更新链路：重新执行 render → 生成 newVNode → diff → patch 真实 DOM。
