vue3中要用async或者await怎么引入使用

在 Vue 3 中，使用 `async` 和 `await` 与在普通的 JavaScript 代码中使用方式相同。你可以在 Vue 单文件组件的 `<script>` 标签中的方法中使用它们，也可以在 Vue 组件中的生命周期钩子函数中使用它们。

如果你使用 Vue CLI 创建项目，Vue 3 会默认使用 Babel，因此你可以直接在代码中使用 `async` 和 `await`，不需要额外配置。如果你手动配置了 Babel，确保你已经安装了 `@babel/plugin-transform-runtime` 插件，并在 `.babelrc` 或 `babel.config.js` 文件中进行了配置。

以下是一个简单的示例，展示了在 Vue 组件中使用 `async` 和 `await`：

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      users: []
    };
  },
  async created() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    this.loading = false;
    this.users = data;
  }
};
</script>

在上面的代码中，我们在组件的 `created` 生命周期函数中使用了 `async` 和 `await`，从远程 API 获取用户数据，并在获取完成后将数据保存到组件的 `users` 数据项中。注意，我们需要将 `fetch` 方法和 `response.json()` 方法都用 `await` 关键字进行修饰，才能保证程序正确执行。