immediate: true使watch回调在组件初始化时立即执行一次，而非等待数据首次变化；适用于初始拉取接口、表单校验等场景，首次执行时oldval为undefined，需做判空处理。
在 watch 中配置 immediate: true，就能让回调函数在组件初始化时立即执行一次，而不是等数据第一次变化才触发。
Vue 2 选项式 API 写法
直接在 watch 选项的对象中，为对应字段设置 immediate: true：
- 写在监听字段的配置对象里，和
handler、deep同级 - 首次执行时，
oldVal是undefined，需做判断避免报错
watch: {
searchQuery: {
handler(newVal) {
if (newVal) this.fetchResults(newVal)
},
immediate: true // 组件创建完成即执行一次
}
}
Vue 3 Composition API 写法
作为 watch() 函数的第三个参数（配置对象）传入：
- 必须是对象形式，不能写在回调里
- 支持与其他选项如
deep: true组合使用
import { ref, watch } from 'vue'
const userInfo = ref({ name: '李四', role: 'admin' })
watch(
() => userInfo.value.role,
(newRole) => {
this.loadPermissions(newRole)
},
{ immediate: true } // 初始化立刻执行
)
什么情况下该用 immediate: true
适合那些“一上来就得干”的逻辑，比如：
- 根据初始值拉取接口数据（如权限、列表、配置）
- 基于当前状态做校验或计算（如表单初始校验）
- 同步第三方库状态（如地图中心点、编辑器内容）
注意：涉及 DOM 操作（如聚焦输入框、滚动定位）仍建议放在 mounted 钩子中，因为此时 DOM 已就绪。
常见误区提醒
-
immediate: true不代表监听更“灵敏”，它只控制首次是否执行，不改变响应式原理 - 对原始值（字符串、数字）监听时，
immediate有效，但不需要deep - 不要滥用——如果初始化逻辑简单且与后续变化逻辑无关，直接在
created或onMounted中调用更清晰
