immediate 控制监听器是否立即执行，解决组件初始化时需立刻响应数据的问题；deep 控制是否深度监听对象内部变化，解决嵌套属性变更无法捕获的问题；二者可组合使用以统一表单校验逻辑。

Vue 侦听器的 immediate 和 deep 不是锦上添花的修饰，而是解决两类具体问题的开关：一个管“什么时候执行”，一个管“监听多深”。

immediate：让监听器一创建就干活

默认 watch 只在数据变化后触发。如果你需要组件刚挂载、响应式数据已就绪时，立刻根据当前值做点事，就得加 immediate: true。

• 搜索页加载时，用 URL 中的 keyword 立即发起首次请求，不用等用户输入
• 权限组件接收 role prop，一进来就加载对应菜单和按钮配置
• 编辑弹窗打开，基于传入的初始表单对象立刻校验并展示错误提示

注意：首次执行时，oldValue 是 undefined，回调里要判断，避免报错；如果逻辑涉及 DOM 操作（比如聚焦输入框），仍建议放在 mounted 中处理更稳妥。

deep：让监听器钻进对象里盯住每个字段

Vue 默认只监听对象或数组的引用是否被替换。改了 user.address.city，而 watch 的是 user，不加 deep: true 就完全收不到。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 监听整个表单对象（如 formModel），任意深层字段（包括 tags[0].name 或 profile.phone）改动都触发校验
• 监控图表配置项（如 chartOptions），任一嵌套属性变更都重绘图表
• 处理树形菜单数据（menuTree），节点增删或属性更新都能捕获

⚠️ 深度监听会递归遍历所有属性建立依赖，性能开销明显。不要对大型对象盲目开启；若只需关注某一个字段（如 user.email），直接写 watch(() => user.email, ...) 更高效、更精准。

immediate + deep：表单场景的常用组合

很多业务既要“第一次就校验”，又要“后续任何修改都响应”，这时两个参数一起用，逻辑更统一、代码更简洁。

• 用户编辑弹窗：props 传入 user 对象，打开即校验初始状态（immediate）
• 用户修改姓名、地址、偏好设置等任意深层字段，实时更新错误状态（deep）
• 写法示例：
  watch: {
    user: {
      handler() { this.validateForm() },
      immediate: true,
      deep: true
    }
  }

这比在 mounted 里手动调一次校验 + 单独写个深度 watch 更少出错，也更容易维护。