首页/ 学科题库/ vue/ 立即执行侦听器
vue 实战教程

立即执行侦听器

2026-05-20 约 5 分钟 juanwangdev

立即执行侦听器

默认情况下,侦听器仅在数据变化时触发。

immediate 选项

JavaScript
watch(
  question,
  async (newQuestion) => {
    const answer = await fetchAnswer(newQuestion)
    console.log(answer)
  },
  { immediate: true }
)

侦听器创建时立即执行一次,后续数据变化也会触发。

应用场景

JavaScript
watch(
  userId,
  async (id) => {
    user.value = await fetchUser(id)
  },
  { immediate: true }
)

组件加载时立即获取数据。

对比

选项初始执行变化执行
默认否是
immediate: true是是

immediate: true 常用于初始化逻辑。

要点总结

  • { immediate: true } 使侦听器创建时执行一次
  • 适用于初始化数据请求
  • 后续数据变化仍会正常触发
  • 避免在 created 钩子中重复编写相同逻辑
想在手机上练这篇的配套题目?
使用微信 卷王开发者小程序/App,首页顶部扫一扫识别下方二维码,即可解锁本讲对应真题与错题本。
了解产品 App
← 上一篇 深度侦听 下一篇 → 计算属性与侦听器的选择