immediate: true使watch回调在组件初始化时立即执行一次，而非等待数据首次变化；适用于初始拉取接口、表单校验等场景，首次执行时oldVal为undefined，需做判空处理。

在 watch 中配置 immediate: true，就能让回调函数在组件初始化时立即执行一次，而不是等数据第一次变化才触发。

Vue 2 选项式 API 写法

直接在 watch 选项的对象中，为对应字段设置 immediate: true：

• 写在监听字段的配置对象里，和 handler、deep 同级
• 首次执行时，oldVal 是 undefined，需做判断避免报错

示例：

watch: {
  searchQuery: {
    handler(newVal) {
      if (newVal) this.fetchResults(newVal)
    },
    immediate: true // 组件创建完成即执行一次
  }
}

Vue 3 Composition API 写法

作为 watch() 函数的第三个参数（配置对象）传入：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• 必须是对象形式，不能写在回调里
• 支持与其他选项如 deep: true 组合使用

示例：

import { ref, watch } from 'vue'
const userInfo = ref({ name: '李四', role: 'admin' })

watch(
  () => userInfo.value.role,
  (newRole) => {
    this.loadPermissions(newRole)
  },
  { immediate: true } // 初始化立刻执行
)

什么情况下该用 immediate: true

适合那些“一上来就得干”的逻辑，比如：

• 根据初始值拉取接口数据（如权限、列表、配置）
• 基于当前状态做校验或计算（如表单初始校验）
• 同步第三方库状态（如地图中心点、编辑器内容）

注意：涉及 DOM 操作（如聚焦输入框、滚动定位）仍建议放在 mounted 钩子中，因为此时 DOM 已就绪。

常见误区提醒

• immediate: true 不代表监听更“灵敏”，它只控制首次是否执行，不改变响应式原理
• 对原始值（字符串、数字）监听时，immediate 有效，但不需要 deep
• 不要滥用——如果初始化逻辑简单且与后续变化逻辑无关，直接在 created 或 onMounted 中调用更清晰