vue3.0 中如何在setup中使用async await

2024-01-11 20:17:58

第一种方法使用suspense 包裹你的组件感觉不太好文档

<template>
 <suspense>
        <router-view></router-view>
</suspense>
</template>

export default {
  async setup() {
    // 在 `setup` 内部使用 `await` 需要非常小心
    // 因为大多数组合式 API 函数只会在
    // 第一个 `await` 之前工作
    const data = await loadData()

    // 它隐性地包裹在一个 Promise 内
    // 因为函数是 `async` 的
    return {
      // ...
    }
  }
}

第二种方法使用生命周期钩子

setup() {
    const users = ref([]);
    onBeforeMount(async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      users.value = res.data;
      console.log(res);
    });

    return {
      users,
    };
  },

vue3.0 中如何在setup中使用async await