deep用于深度监听对象或数组的嵌套属性变化，immediate使watch回调在创建时立即执行一次；二者常组合使用，但需注意首次执行时oldValue为undefined及初始值合法性问题。

在 Vue.js 的 watch 选项中，deep 和 immediate 是两个常被误解但极其实用的配置项。它们不改变监听逻辑本身，却能精准控制监听的“深度”和“时机”，尤其在处理响应式对象、数组、初始化逻辑或异步依赖时起关键作用。

deep：监听嵌套属性变化的必要开关

默认情况下，Vue 的 watch 只监听目标引用是否变更（浅监听）。对对象或数组内部属性的修改（如 obj.name = 'new' 或 arr.push(1)）不会触发回调——除非开启 deep: true。

注意：deep 仅对对象/数组生效；对基本类型（string、number 等）设 deep: true 无意义，也不会报错。

• 适合监听整个表单对象、配置项、嵌套状态树等结构较深的数据
• 开启后会递归遍历所有嵌套属性，建立响应式依赖，有一定性能开销，避免滥用
• 无法监听通过 Object.assign() 或展开运算符直接替换整个对象的变更（因为引用变了，此时无需 deep，普通监听即可触发）
• 若只想监听某几个特定深层字段，建议改用计算属性 + 多个独立 watch，或用 watch(() => obj.a.b.c, ...) 的函数式写法（Vue 3 推荐，Vue 2.6+ 也支持）

immediate：让监听器“立刻执行一次”

immediate: true 表示在侦听器创建完成时，立即以当前值执行一次回调函数。它不关心数据是否后续变化，只解决“初始态需要同步处理”的场景。

典型用途包括：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

• 组件加载时根据初始 prop 或 data 发起请求（如根据 id 拉取详情）
• 初始化第三方库实例并绑定初始值（如初始化富文本编辑器内容）
• 表单校验逻辑需在挂载时就检查一遍空值状态
• 与 deep 组合使用时，可确保首次进入页面就对整个对象做一次完整校验或同步

⚠️ 注意：如果同时用了 immediate 和 deep，首次执行的参数是当前完整对象（非变化前后的对比），因此回调中不要假设一定有旧值。

deep + immediate 联合使用的典型陷阱与对策

二者一起用很常见，但也容易埋坑：

• 首次执行时 oldValue 是 undefined（因为没有“之前的状态”），需在回调中手动判断规避报错
• 深层对象首次赋值若为 null 或 undefined，开启 deep 会警告“Cannot convert undefined or null to object”，应确保初始值是合法对象（如 {}）
• 在 setup()（Vue 3）中使用 watch API 时，immediate 默认为 false，且必须显式传入对象配置；而选项式 API 中可简写为 watch: { key: [handler, { immediate: true }] }
• 监听响应式数组时，deep 能捕获 push/splice 等变更，但无法区分是新增还是删除——如需精确感知，建议配合 watch 数组长度或使用 watchEffect + onInvalidate 做清理

替代方案：什么情况下不该用 deep/immediate？

不是所有深层监听都该靠 deep 解决：

• 只需监听某个固定路径（如 user.profile.avatar），优先用函数式监听：watch(() => user.value.profile.avatar, handler)
• 需要响应“任意子属性变化”但又不想深度遍历（如大型配置对象），可考虑用 Proxy 封装后触发自定义事件，再由 watch 捕获
• 初始化逻辑若与生命周期强相关（如要等 DOM 渲染后操作），immediate 可能过早，更适合放在 onMounted 或 nextTick 中执行
• Vue 3 中推荐用 watchEffect 替代部分 watch + immediate 场景，它天生具备“立即执行 + 自动追踪”特性，代码更简洁

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！