学习Vue3骨架+异步组件(defineAsyncComponent)+Suspense
利用Suspense插槽合理显示骨架与用户界面
<template #defalut> 显示用户内容 不用写插槽也可以
<template #fallback> 显示骨架
异步组件
<script setup name="SyncVue">
import { ref, onMounted } from 'vue';
const data = ref();
await new Promise((resolve)=>{
setTimeout(() => {
data.value = '我是异步加载';
resolve()
console.log('666666666');
}, 2000);
})
</script>
<template>
<div>{{ data }}</div>
</template>App.vue
<template>
<div>
<Suspense>
<!-- 放组件加载后的内容 -->
<SyncVue></SyncVue>
<template #fallback>
<!-- 放组件加载前的内容（骨架屏） -->
<!-- <deflutCom></deflutCom> -->
Loding.......
</template>
</Suspense>
</div>
</template><script setup>
import { defineAsyncComponent, ref } from 'vue';
const SyncVue = defineAsyncComponent(() => import("./components/SyncVue.vue"))
</script>