官方文档
异步组件 | Vue3中文文档
动态组件 & 异步组件 | Vue3中文文档
使用方法一：<Suspense></Suspense>与插槽配合
1. 写一个异步组件
defineComponent 包裹要导出的实例对象能获取到更多提示。
1.1 setup 中返回一个 Promise 对象
/src/components/Async.vue
<template>
<h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return new Promise(resolve => {
setTimeout(() => {
return resolve({ result: "HI~Async" });
}, 3000);
});
}
});
</script>
1.2 setup 中使用 async/await 代替返回 Promise（更推荐）
/src/components/Async.vue
<template>
<h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
async setup() {
const result = ref("");
await setTimeout(() => {
result.value = "HI~Async";
}, 3000);
return {
result
};
}
});
</script>
2. 在 App.vue 中使用异步组件
注意：
- 使用
<Suspense></Suspense>包裹所有异步组件相关代码 -
<Suspense></Suspense>下<template #default></template>插槽包裹异步组件 -
<Suspense></Suspense>下<template #fallback></template>插槽包裹渲染异步组件之前的内容
/src/App.vue
<template>
<div id="app">
<Suspense>
<template #default>
<Async></Async>
</template>
<template #fallback>
<h1>Loading...</h1>
</template>
</Suspense>
</div>
</template>
<script lang="ts">
// import { ref } from "vue";
import Async from "./components/Async.vue";
export default {
name: "App",
components: {
Async
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3. 完成，效果如图所示
