Vue 3如何在渲染前通过async/await获取初始数据？

1. 直接在onMounted中使用异步回调（和Svelte写法一致） #

Vue 的onMounted其实完全支持传入异步函数，只是回调返回的 Promise 不会被 Vue 主动处理，但这丝毫不影响代码执行逻辑，你可以直接简化写法：

<script setup>
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';

const user = reactive({
  firstName: '',
  lastName: '',
  email: ''
});
const isLoading = ref(true);

onMounted(async () => {
  try {
    const res = await axios.get(vars.restUrl);
    user.firstName = res.data.firstName;
    user.lastName = res.data.lastName;
    user.email = res.data.email;
  } catch (error) {
    // 自定义错误处理，比如提示用户加载失败
  } finally {
    isLoading.value = false; // 原代码此处写错，应改为false结束加载状态
  }
});
</script>

这种写法和你熟悉的 Svelte 逻辑完全对齐，无需额外封装函数，代码更简洁直观。

2. 顶层 await + Suspense（无需抵触实验性特性） #

虽然 Suspense 目前处于实验阶段，但在多数业务场景中已经可以稳定使用。如果你希望组件在数据加载完成前不渲染内容，而是显示统一的加载占位，可以用这种方式：

<!-- App.vue -->
<script setup>
import { reactive } from 'vue';
import axios from 'axios';

// 顶层await触发Suspense，组件会等待Promise完成后再渲染
const res = await axios.get(vars.restUrl);
const user = reactive(res.data);
</script>

<template>
  <div>
    <p>{{ user.firstName }} {{ user.lastName }}</p>
    <p>{{ user.email }}</p>
  </div>
</template>

然后在根组件中用 Suspense 包裹 App：

<!-- 根组件 -->
<script setup>
import App from './App.vue';
</script>

<template>
  <Suspense>
    <template #default>
      <App />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

这种方式无需手动管理isLoading状态，Vue 会自动处理加载逻辑，代码更轻量化。

3. 借助 VueUse 的useAsyncState简化逻辑 #

如果不想重复编写异步状态管理的模板代码，可以使用 VueUse 工具库的useAsyncState，它封装了加载状态、数据获取、错误处理的全部逻辑：

<script setup>
import { useAsyncState } from '@vueuse/core';
import axios from 'axios';

const { state: user, isLoading, error } = useAsyncState(
  () => axios.get(vars.restUrl).then(res => res.data),
  { firstName: '', lastName: '', email: '' } // 初始值
);
</script>

开箱即用，省去手动编写try/catch和状态变量的麻烦。

对你现有代码的小修正 #

你原代码中isLoading.value = true是逻辑错误，应该在数据加载完成后设置为false，否则加载状态永远不会结束。

内容的提问来源于stack exchange，提问作者Toni Joe