watch 的 immediate: true 使回调在侦听器创建后立即执行一次，此时 oldValue 为 undefined、newValue 为初始值，适用于首次加载即生效场景，如初始化请求或表单填充。
Vue 的 watch 默认是“懒执行”的——只在监听的数据真正发生变化时才触发回调。如果你希望组件一创建就立刻运行一次监听逻辑（比如初始化请求、校验、同步状态），就得用 immediate: true。
immediate 的核心作用
它让 watch 回调在侦听器 setup 完成后**立刻执行一次**，此时还没有任何数据变更发生。这时传入回调的 oldValue 是 undefined，newValue 就是当前的初始值。
- 适用于需要“首次加载即生效”的场景，比如页面打开时拉取默认列表、预填充表单、初始化第三方插件状态
- 仅在侦听器创建时触发一次，后续仍按常规逻辑响应变化
- 对 ref、reactive、computed 等响应式源都有效
基本写法（组合式 API）
在 watch() 的第三个参数对象中设置 immediate: true：
import { ref, watch } from 'vue'
const count = ref(0)
const userInfo = ref({ name: 'Alice', age: 25 })
watch(count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`)
}, { immediate: true }) // ✅ 初始化立即执行
// 监听对象时也一样
watch(userInfo, (newVal, oldVal) => {
console.log('用户信息更新了', newVal)
}, { immediate: true })
配合 deep 实现对象内部变化+初始化触发
如果监听的是一个对象或数组，且你想在它的任意嵌套属性变化时都响应，需加 deep: true。注意：immediate 和 deep 可以同时使用，但它们职责不同：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
immediate控制“是否第一次就执行” -
deep控制“是否监听深层属性变化” - 二者互不干扰，可叠加使用
例如：
const form = ref({
username: '',
profile: { avatar: '', bio: '' }
})
watch(form, (newVal, oldVal) => {
console.log('整个 form 或其任意子字段变了')
}, { immediate: true, deep: true })
这样既能在组件挂载时校验初始表单，也能在用户修改 form.profile.bio 时实时响应。
常见误区提醒
别以为 immediate: true 能替代 mounted 或 onMounted —— 它只是 watch 的执行时机控制，不保证 DOM 已就绪；若需操作 DOM，建议结合 nextTick 或生命周期钩子。
- 监听 computed 或函数返回值时，
immediate同样生效 - 监听多个源（如
watch([a, b], ...)）时，immediate依然有效 - 不要在
immediate回调里直接修改被监听的源，否则可能引发无限循环（尤其搭配deep时）
