immediate让watch监听器创建时立即执行一次，deep开启对嵌套属性的递归监听，二者可组合使用但需注意首次执行oldVal为undefined、初始值不能为null/undefined等细节。
在 Options API 中，watch 选项通过对象写法配置 immediate 和 deep，能精准控制侦听器的触发时机和监听粒度。二者不互斥，常组合使用，但需理解各自作用及配合时的关键细节。
immediate：让监听器一创建就执行一次
它解决的是“初始态需要立即响应”的问题，而不是等数据第一次变化才开始工作。
- 写法统一放在 watch 的 handler 配置对象中
- 首次执行时，回调接收
newVal（当前值），oldVal为undefined - 常用于：组件加载即发请求、初始化第三方库、表单首次校验
例如：
export default {
data() {
return {
searchQuery: '',
userInfo: { name: '张三', role: 'user' }
}
},
watch: {
searchQuery: {
handler(newVal) {
if (newVal) this.fetchResults(newVal)
},
immediate: true // 页面一打开就查空关键词（或做防抖准备）
},
userInfo: {
handler(newVal) {
// 注意：此处 newVal 是整个对象，oldVal 为 undefined
if (newVal && newVal.role) {
this.loadPermissions(newVal.role)
}
},
deep: true,
immediate: true
}
}
}deep：开启对嵌套属性的递归监听
默认 watch 只检测引用是否改变（浅监听），修改 userInfo.name 不会触发；启用 deep: true 后，Vue 会遍历对象所有可响应属性并建立依赖。
- 仅对响应式对象或数组有效，对
string/number等基本类型设deep无效果 - 初始值不能为
null或undefined，否则会报 “Cannot convert undefined or null to object” - 性能开销随嵌套深度和属性数量上升，避免给大对象盲目加
deep
例如：
watch: {
formConfig: {
handler(newVal) {
this.syncEditorConfig(newVal)
},
deep: true, // 支持监听 formConfig.rules[0].message 变化
immediate: true
}
}immediate + deep 组合使用的注意事项
这是高频但易出错的搭配，重点有三点：
- 首次执行时
oldVal一定是undefined，不可直接解构或调用.length等方法 - 若
userInfo初始是null，需改为{}或reactive({})，否则 deep 监听会失败 - 不要指望首次执行能拿到“变化前后的差异”，它只是同步快照，逻辑应围绕
newVal展开
比如安全写法：
userInfo: {
handler(newVal, oldVal) {
// ✅ 正确：先判空再操作
if (newVal?.role && newVal.role !== (oldVal?.role)) {
this.updateAccessControl(newVal.role)
}
},
deep: true,
immediate: true
}替代方案：更轻量、更精准的监听方式
当只需关注某一个深层字段时，不必开启全量 deep：
- Vue 2：用字符串路径写法（如
'userInfo.profile.avatar'） - Vue 3 Options API 同样支持，且更推荐函数式写法：
watch: { 'userInfo.profile.avatar': { handler(newVal) { this.cacheAvatar(newVal) }, immediate: true } }这种方式无性能损耗，响应也更及时，适合大多数业务场景。
