在 Vue 3 中，你可以在组件的生命周期钩子中使用 async/await。但是，你需要小心处理 async/await 可能抛出的错误，因为生命周期钩子不默认处理异步错误。
以下是一个示例，展示如何在 onMounted 钩子中使用 async/await：
<template>
<div>{{ data }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(async () => {
try {
data.value = await fetchData();
} catch (error) {
console.error('Error fetching data:', error);
}
});
return { data };
},
};
async function fetchData() {
// 模拟异步获取数据
return new Promise((resolve) => {
setTimeout(() => {
resolve('Some data');
}, 1000);
});
}
</script>在这个例子中，fetchData 函数模拟了一个异步获取数据的过程。在 onMounted 钩子中，我们使用 async/await 来等待数据的获取，并在获取成功后将数据赋值给组件的响应式引用 data。如果在获取数据的过程中发生错误，我们捕获错误并在控制台中输出。