Vue的<script setup>顶层用await调用异步方法导致模板不加载如何解决？

问题根因 #

你遇到的是Vue3 <script setup> 顶层await的默认行为问题：当你在<script setup>中直接使用顶层await时，Vue会自动将该组件标记为异步组件，在异步逻辑未执行完成前，组件模板不会渲染，必须配合<Suspense>组件使用才能正常展示内容。

可选解决方法 #

• 方案1：将异步逻辑移入生命周期钩子/回调函数，避免使用顶层await
  最常用的解决方式，不需要调整父组件代码，直接把await逻辑放到onMounted等钩子内即可：

  <script setup>
  import { onMounted } from 'vue'
  import { loadTask } from './methods/load.js';
  
  onMounted(async () => {
    const test = loadTask(3);
    console.log(await test);
  })
  </script>
  <template>
    <div>正常运行</div>
  </template>
  

• 方案2：用Promise的then方法替代await
  不需要改动代码结构，直接把await调用改成链式回调即可：

  <script setup>
  import { loadTask } from './methods/load.js';
  const test = loadTask(3);
  test.then(res => console.log(res))
  </script>
  <template>
    <div>正常运行</div>
  </template>
  

• 方案3：保留顶层await，父组件用<Suspense>包裹当前组件
  如果你确实需要在组件初始化阶段阻塞执行逻辑，可以在父组件引用当前组件的位置新增<Suspense>包裹，同时可以自定义加载状态：

  <!-- 父组件代码 -->
  <script setup>
  import ChildComp from './ChildComp.vue' // 对应你写了顶层await的子组件
  </script>
  <template>
    <Suspense>
      <template #default>
        <ChildComp />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </template>
  

内容的提问来源于stack exchange，提问作者Jens Törnell