deep 用于监听对象或数组内部属性变化，需显式开启；immediate 使监听器在绑定时立即执行一次。二者可组合使用，如监听嵌套对象并初始校验，但 deep 影响性能，应谨慎使用。
Vue.js 中 watch 的 deep 和 immediate 是两个常用但容易混淆的配置项，它们解决的是不同场景下的响应式监听需求。
deep：监听对象或数组内部属性的变化
默认情况下，watch 只监听引用是否改变（浅监听）。当被监听的是一个对象或数组，且你关心其内部某个属性值变化（比如 user.name 或 list[0].id），就必须开启 deep: true。
注意：deep 仅对对象、数组等复杂类型有效；对基本类型（如字符串、数字）设 deep 没有意义，也不会报错，但不会触发深度遍历。
- 适用场景：监听表单对象、嵌套配置、Vuex state 片段、API 返回的嵌套数据
- 性能提示：开启
deep会递归遍历所有嵌套属性，建立响应式依赖，数据结构很深时可能影响性能 - 不能监听 undefined 或 null 值的属性（会跳过）；建议确保初始值是合法对象/数组
immediate：让监听器在绑定时立即执行一次
immediate: true 表示 watch 回调在组件初始化、监听器创建完成时，**立刻用当前值执行一次**，而不仅是在后续变化时才触发。
立即学习“前端免费学习笔记（深入）”；
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
它和数据是否“有变化”无关，只和“监听器挂载时机”有关。常用于需要根据初始值做副作用操作的场景，比如初始化请求、同步 UI 状态、设置默认筛选条件等。
- 典型用法：监听路由参数、搜索关键词、主题配置，一进来就按当前值处理
- 可与
deep同时使用，例如监听一个深层对象并立即校验其初始状态 - 回调中
newVal是当前值，oldVal在 immediate 首次执行时为undefined（除非手动缓存初始值）
组合使用 deep + immediate 的实际例子
比如有一个用户配置对象 config，含多层嵌套字段，需在组件加载时校验并提交，之后每次修改都重新校验：
watch: {
config: {
handler(newVal) {
this.validateConfig(newVal);
this.submitIfValid(newVal);
},
deep: true,
immediate: true
}
}
这样既避免了在 created 或 mounted 中重复写校验逻辑，又保证了后续任意层级变更都能捕获。
替代方案与注意事项
不是所有场景都适合用 deep + immediate：
- 若只需响应首次赋值（而非挂载时），可用
v-if控制组件渲染时机，或用nextTick+ 普通 watch - Vue 3 的
watch支持监听 getter 函数，更灵活地控制监听范围，可部分替代deep - 对大型嵌套对象，考虑用计算属性（
computed）派生关注的字段，再监听该计算属性，更精准、性能更好
