利用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>