官方文檔
異步組件 | Vue3中文文檔
動(dòng)態(tài)組件 & 異步組件 | Vue3中文文檔
使用方法一：<Suspense></Suspense>與插槽配合
1. 寫一個(gè)異步組件
defineComponent 包裹要導(dǎo)出的實(shí)例對(duì)象能獲取到更多提示憾筏。
1.1 setup 中返回一個(gè) Promise 對(duì)象
/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>包裹所有異步組件相關(guān)代碼 -
<Suspense></Suspense>下<template #default></template>插槽包裹異步組件 -
<Suspense></Suspense>下<template #fallback></template>插槽包裹渲染異步組件之前的內(nèi)容
/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. 完成饼记，效果如圖所示
