在 Vue 3 中，watch 设置 immediate: true 可使监听器注册时立即执行一次回调，之后在数据变化时再触发；支持 ref 直接监听和 reactive 对象的 getter 函数监听，并需注意首次 oldVal 为 undefined 及 DOM 操作时机。
在 Vue 3 中，只需在 watch 的第三个参数配置对象中设置 immediate: true，监听器就会在注册时立即执行一次回调，之后仍会在数据变化时再次触发。
基础写法：监听 ref 并立即执行
适用于简单响应式值（如数字、字符串）：
- 直接传入 ref 作为第一个参数
- 回调接收新值（首次执行时旧值为 undefined）
- 配置项中加入
{ immediate: true }
示例：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('当前值:', newVal, '上一次值:', oldVal)
}, { immediate: true }) // ✅ 立即执行一次，输出 "当前值: 0 上一次值: undefined"
监听 reactive 对象或嵌套属性时的写法
当监听的是 reactive 对象或需要精准捕获某字段时，推荐用 getter 函数形式：
立即学习“前端免费学习笔记（深入）”；
- 第一个参数写成箭头函数，返回要监听的值（如
() => user.profile.role） - 同样在配置项中加
immediate: true - 若涉及对象内部变化且需响应，可同时加
deep: true
示例：
const user = reactive({ profile: { role: 'admin' } })
watch(
() => user.profile.role,
(newRole) => {
console.log('角色已设为:', newRole)
},
{ immediate: true }
)
常见注意事项
- 首次执行时 oldVal 总是 undefined，回调中需做判空处理（如
if (oldVal !== undefined) { ... }） - 避免在
immediate: true回调中执行强依赖 DOM 的操作（如ref.value.focus()），应放在onMounted或配合flush: 'post'使用 - 与
created或onBeforeMount不同，immediate是纯数据层面的“立刻”，不保证组件已挂载或 DOM 已就绪
