watch 的 immediate 参数怎么用：解决组件初始化时不执行监听的痛点

加 immediate: true 可使 watch 回调在组件创建完成时立即执行一次，适用于初始化依赖 props、ref 初值或对象配置的场景，需作为 options 对象属性与 deep 等配合使用，首次 oldValue 为 undefined。

加 immediate: true 就行——它让 watch 回调在组件创建完成、监听器挂载好的那一刻，立刻用当前值执行一次，而不是等数据“变”了才动。

什么时候必须加 immediate

以下情况不加 immediate，逻辑就跑不通：

• 父组件传来的 prop 初始就有值（比如 props.productId），子组件需要一上来就根据它请求详情
• 表单字段从后端拉回默认值后，要立刻校验或触发联动（比如选中“北京”，马上加载“朝阳区”“海淀区”）
• setup 里用 ref 初始化了一个变量，且赋了初值（如 const searchKey = ref('vue')），你希望页面还没渲染完就先走一遍搜索逻辑

怎么写才对（Vue 3 script setup）

immediate 不是独立参数，必须作为 watch 的第三个参数（options 对象）里的一个属性，和 deep、flush 等并列。

✅ 正确写法：

const userId = ref('U1001')watch(() => userId.value, (newId, oldId) => {  console.log('ID 变了或刚进来', newId)}, { immediate: true })

❌ 错误写法（像 Vue2 那样把 immediate 放错位置）：

// 这样 immediate 不生效watch(  () => userId.value,  { immediate: true }, // 错：把配置当成了 handler  (newId) => { /* ... */ })

配合 deep 一起用更常见

很多初始化数据是对象或数组，比如 props.config 或 ref({ theme: 'dark', lang: 'zh' })。这时往往要同时开 deep: true 和 immediate: true：

• deep: true → 监听到对象内部任意属性变化（如 config.theme 改了）
• immediate: true → 第一次拿到完整 config 时就立刻应用主题、语言等设置

示例：

watch(() => props.config, (newConfig) => {  applyTheme(newConfig.theme)  setLanguage(newConfig.lang)}, { immediate: true, deep: true })

注意两个关键细节

首次执行时，oldValue 一定是 undefined —— 因为还没“上一次”的值。所以判断逻辑别踩坑：

• ✅ 推荐：if (newVal && newVal.id) { ... }
• ❌ 避免：if (oldVal !== newVal) { ... }（首次永远为 true，可能引发误判）

另外，确保初始值是合法对象/数组，别是 null 或 undefined，否则开 deep 会报错“Cannot convert undefined or null to object”。