deep 控制监听深度,开启后可响应对象内部属性变化;immediate 控制初始执行,设为 true 时监听器创建后立即运行一次;二者作用正交,可单独或组合使用。

Vue 的 watch 侦听器中,deep 和 immediate 是两个独立但常一起用的配置项,各自解决一类明确问题:一个管“监听多深”,一个管“什么时候开始执行”。
deep:监听对象内部变化必须显式开启
Vue 默认只做浅层监听——即只检测对象或数组的引用是否被替换。比如监听 user,当 user = { ... } 整体赋值时能触发;但若只是 user.profile.email = 'a@b.com',默认不会响应。
- 开启
deep: true后,Vue 会递归遍历整个对象(或数组),为每个嵌套属性建立响应式依赖 - 适用于监听表单模型、配置对象、树形结构等任意深层字段变更的场景
-
注意:对基本类型(字符串、数字)设
deep无效;不能监听null或undefined的初始值;大型对象慎用,性能开销明显 - 更高效的做法是:如果只关心某个具体字段(如
user.email),直接监听该路径,而非整个对象
immediate:让监听器一创建就运行一次
默认情况下,watch 只在数据**后续发生变化时**触发。但很多逻辑需要组件初始化时就基于当前值执行,比如校验、拉取权限、发起首屏请求。
- 设
immediate: true后,回调会在监听器绑定完成、响应式数据就绪后立刻执行一次 - 首次执行时,
oldValue为undefined,代码中需做兼容判断 - 涉及 DOM 操作(如聚焦输入框、滚动定位)的逻辑,仍建议放在
mounted钩子中,更可靠 - 适合初始化远程数据、同步状态、预计算依赖值等场景
二者组合:常见于表单类业务逻辑
编辑弹窗加载用户数据时,既要“打开即校验初始值”,又要“修改任意字段都实时响应”,这时 immediate + deep 就很自然。
立即学习“前端免费学习笔记(深入)”;
- 写法示例(Options API):
user: { handler() { this.validateForm() }, immediate: true, deep: true } - 避免手动在
mounted中调一次校验 + 单独写深度 watch,逻辑更集中、不易遗漏 - 组合使用不增加额外复杂度,但需清楚:两者作用正交,可单独启用,也可同时启用


















