immediate: true 使 watch 在组件初始化时立即执行一次回调，而非仅响应数据变化；需用对象式写法配置 handler 和 immediate，首次执行时 oldValue 为 undefined。
在 Vue Options API 中，immediate: true 是 watch 配置项之一，作用是在组件创建完成、数据初始化后**立刻执行一次监听回调**，而不是等到数据真正发生变化时才触发。
immediate 的基本写法
Options API 中 watch 支持对象式写法，必须用 handler 字段定义回调函数，并在同级配置 immediate: true：
- 监听单个响应式字段（如
searchQuery）：
<script>
export default {
data() {
return {
searchQuery: ''
}
},
watch: {
searchQuery: {
handler(newVal) {
console.log('搜索关键词：', newVal)
},
immediate: true
}
}
}
</script>
组件一挂载，就会立即打印 搜索关键词： '' —— 此时 oldValue 为 undefined，newVal 是当前初始值。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
immediate 常见使用场景
- 初始化请求：页面加载时需根据默认参数拉取列表数据，避免空白等待
- 第三方库同步：比如地图组件初始化后，立即将 Vue 数据同步到外部 SDK 实例
- 表单校验启动：对必填字段，在组件创建时就检查是否为空，而非等用户输入后再提示
注意事项与避坑点
-
immediate只影响首次调用时机，不影响后续变更行为；它和deep可同时使用，互不冲突 - 首次执行时
oldValue总是undefined，若逻辑中依赖旧值比对，需加判断 - 不要在
watch函数式写法中设置immediate（如searchQuery(newVal, oldVal) { ... }），该写法不支持配置项，必须改用对象式 - 若监听的是嵌套路径（如
'userInfo.name'），immediate同样生效，但要注意路径初始值是否存在，否则可能报错或拿到undefined
对比：函数式 vs 对象式写法
❌ 错误（函数式写法无法启用 immediate）：
立即学习“前端免费学习笔记（深入）”；
watch: {<br>
searchQuery(newVal) { /* ... */ } // 这里不能加 immediate<br>
}
✅ 正确（对象式写法才能配置）：
watch: {<br>
searchQuery: {<br>
handler(newVal) { /* ... */ },<br>
immediate: true<br>
}<br>
} 
