在 Vue 3 中，watch 设置 immediate: true 可使其在组件初始化时立即执行一次回调，此时 newVal 为初始值、oldVal 为 undefined，适用于页面加载即请求等场景，但需避免修改监听源以防死循环。

在 Vue 3 中，让 watch 在组件初始化时立即执行一次回调函数，只需在配置对象中设置 immediate: true。

基础用法：启用 immediate

默认情况下，watch 是“惰性”的——只在被监听的值**发生变化后**才触发回调。加上 immediate: true 后，它会在监听建立的**第一时间**（即组件 setup 阶段）同步执行一次回调，此时能拿到初始值和 undefined 作为旧值。

• newVal 是 source 的当前初始值（比如 ref(5) 的 5）
• oldVal 在首次执行时恒为 undefined

适用场景举例

常见于需要“一进来就干活”的逻辑：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 页面加载时根据初始搜索关键词发起请求
• 根据路由参数或表单默认值预填充状态
• 初始化第三方库并传入响应式数据
• 校验初始输入是否合法（如邮箱格式）

注意事项

使用 immediate: true 时需注意：

立即学习“前端免费学习笔记（深入）”；

• 不要在回调里直接修改正在监听的源（例如 count.value++），否则可能触发二次监听或死循环
• 若监听的是对象或数组且需响应内部变化，仍需配合 deep: true（immediate 和 deep 可同时使用）
• 回调中访问 DOM 元素前，确保元素已挂载；如需操作更新后的 DOM，可改用 flush: 'post'

对比 watchEffect

如果只是想“一上来就执行 + 自动追踪依赖”，watchEffect 更简洁——它默认立即执行，且无需手动指定监听源。但 watch 的优势在于能明确区分新旧值、支持异步回调、更精细控制执行时机（如 flush），适合副作用逻辑较重的场景。