Nuxt 3 Script Setup中await失效问题及页面预取数据方案咨询

一、顶层await失效的原因 #

你的问题本质是执行时机与运行环境不匹配：

• Nuxt 3的顶层<script setup>代码会在组件实例初始化后、DOM挂载前执行（对应Vue生命周期的beforeMount阶段）。如果你的await操作依赖浏览器专属API（比如window、document、DOM元素操作），此时这些环境还未就绪，代码自然会报错或无响应。
• onMounted钩子会在DOM完全挂载后触发，nextTick会等待DOM更新完成，这两个时机下浏览器环境已经就绪，依赖这些环境的异步操作就能正常执行。

另外要注意：Nuxt 3本身是支持顶层await的，但它的设计初衷是用于不依赖浏览器环境的服务端/静态端数据预获取，比如调用后端接口，这种场景下顶层await完全有效。

二、页面加载前获取数据的推荐方式 #

根据你的数据获取场景，选择对应的方案：

1. 服务端/静态端预取数据（不依赖浏览器环境） #

这是页面加载前获取数据的最优场景，Nuxt会在构建或请求阶段完成数据获取，页面渲染时直接复用数据：

• 用useFetch（官方推荐，简洁版）：封装了useAsyncData和$fetch，自动处理缓存、重复请求和错误：

  <script setup>
  // 获取文章列表，顶层await直接使用，Nuxt会自动等待数据返回
  const { data: posts, error } = await useFetch('/api/posts')
  </script>
  

• 用useAsyncData（更灵活）：适合需要自定义缓存键、请求逻辑的场景：

  <script setup>
  const { data: user } = await useAsyncData('user-info', async () => {
    const res = await $fetch('/api/user')
    return res.data
  })
  </script>
  

• 直接顶层await调用API：如果不需要Nuxt的缓存、错误处理等附加能力，也可以直接写：

  <script setup>
  const posts = await $fetch('/api/posts')
  </script>
  

2. 客户端专属数据获取（依赖浏览器环境） #

如果数据获取必须依赖浏览器API（比如获取用户UA、操作DOM元素），只能在客户端环境就绪后执行：

• 用onMounted+await：DOM挂载后执行，确保浏览器环境可用：

  <script setup>
  import { onMounted } from 'vue'
  
  let domHeight = 0
  onMounted(async () => {
    // 获取DOM元素高度，必须在DOM挂载后执行
    domHeight = await getElementHeight('#target')
  })
  </script>
  

• 用useLazyFetch/useLazyAsyncData：不会阻塞页面渲染，先显示加载状态，数据返回后再更新页面，适合需要用户尽快看到页面的场景：

  <script setup>
  // 依赖navigator的UA信息，只能在客户端执行
  const { data: userAgent, pending } = await useLazyFetch('/api/analyze-ua', {
    headers: { 'User-Agent': navigator.userAgent }
  })
  </script>
  <template>
    <div v-if="pending">加载中...</div>
    <div v-else>你的浏览器：{{ userAgent }}</div>
  </template>
  

内容的提问来源于stack exchange，提问作者Richard Kenneth