在 Vue 3 中，watch 初始化立即执行需显式设置 immediate: true 为第三个参数；监听 ref 时直接传变量，回调首次触发时 oldValue 为 undefined，newValue 为初始值；支持与 deep: true 同时使用以监听深层变化。

要在 Vue 3 中让 watch 在组件初始化时立即执行一次回调，关键就是设置 immediate: true。它不是“自动生效”的选项，必须显式传入第三个参数对象中。

watch 的 immediate 配置怎么写

语法结构固定：把 { immediate: true } 作为 watch 的第三个参数传入。注意它只对回调函数生效，不改变监听逻辑本身。

• 监听 ref 数据时直接传 ref 变量（不用加 .value）
• 回调函数会立刻执行一次，此时 oldValue 是 undefined，newValue 是 ref 当前的初始值
• 之后每次数据变化，回调仍会照常触发

常见写法示例

比如页面加载时就要根据初始搜索关键词发起请求：

const searchQuery = ref('')

watch(searchQuery, (newVal) => {
  if (newVal) {
    fetchResults(newVal)
  }
}, { immediate: true })

这样组件一挂载，fetchResults('') 就会执行（你可以在回调里加空值判断）。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

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

和 reactive 对象一起用要注意什么

如果监听的是 reactive 对象，默认已深度响应，但 immediate 行为一致：

• 设了 immediate: true，组件初始化时立即调用一次回调
• 回调中的 newVal 是当前对象，oldVal 仍是 undefined
• 如果你只关心某个嵌套字段（如 user.profile.name），建议用 getter 函数方式监听，更精准

immediate 和 deep 能一起用吗

可以，而且很常见。比如监听一个 ref 包裹的复杂表单对象：

const form = ref({
  title: '',
  tags: [],
  meta: { version: 1 }
})

watch(form, (newForm) => {
  console.log('表单已加载或更新', newForm)
}, {
  immediate: true,
  deep: true
})

这样既能拿到初始值，又能捕获内部任意属性（包括数组元素、深层对象）的变化。