Vue3 異步組件 suspense使用詳解

Posted on by

vue在解析我們的組件時， 是通過打包成一個 js 文件，當我們的一個組件 引入過多子組件是，頁面的首屏加載時間 由最後一個組件決定 優化的一種方式就是采用異步組件 ，先給慢的組件一個提示語或者 骨架屏 ，內容回來在顯示內容

結合elementui 使用

代碼  

<template>
  <div class="layout">
    <h1>suspense</h1>
    <Suspense>
        <template #default>
            <sus></sus>
        </template>
        <template #fallback>
              <copyVue/>
        </template>
    </Suspense>
  </div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from "vue";
import copyVue from "./sus/copy.vue";
let sus = defineAsyncComponent(() => import("./sus/index.vue"));
</script>
<style scoped lang="scss">
 $bg:#ccc;
 .layout{
    width: 800px;
    height: 400px;
    background-color: $bg;
    margin: auto;
 }
</style>

引入  defineAsyncComponent   定義異步組件 ，這個api 接收 一個 一個函數 ，函數返回值 為 需要 後來顯示的組件  ， copyVue 為預先顯示的組件 或者自定義內容 

 <Suspense>
        <template #default>
            <sus></sus>
        </template>
        <template #fallback>
              <copyVue/>
        </template>
    </Suspense>

使用 suspense  內置組件 在該組件內 使用 命名插槽 官方 定義的   

  #default  放後來顯示的組件

 #fallback  放置 預先顯示的內容

要想組件變成異步 組件 可以使用 頂層 await 技術  即 不用再 async 函數內使用 那個該組件就變成 異步組件 代碼

<template>
    <div class="sus">
        <img class="img" :src="res.url" alt="">
        <h1 class="posi">{{res.name }}</h1>
        <h1 class="posi">{{ res.des }}</h1>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import './com.scss'
let fn = ()=>{
    return new Promise(  (resolve,reject)=>{
         setTimeout(async() => {
            resolve(axios.get('/data.json'))
         }, 2000);
    })
 }
 let {data:{data:res}}:any =  await   fn()
  console.log(res);
</script>
<style scoped lang='scss'>
 
.sus{
    width: 100%;
    height: 200px;
    background-color: #999;
}
 
</style>

copyvue

<template>
    <div  v-loading="loading" element-loading-text="加載中..." 
    element-loading-background="rgba(122, 122, 122, 0.8)" class="sus">
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
const loading = ref(true)
</script>
<style scoped lang='scss'>
.sus{
    width: 100%;
    height: 200px;
}
 
</style>

scss

.posi{
    height: 50px;
    background-color: rgb(209, 136, 136);
    margin-top: 20px;
 }
 .img{
     width: 30px;
     height: 30px;
     background-color: rgb(113, 52, 52);
 }

 public 下的 data.json 

{
    "data":{
         "name":"你好世界",
         "url":"./favicon.ico",
         "des":"世界是個荒原"
    }
}

public 下的  內容 回當成 服務的  '/xxx' 請求路徑  get可以請求 到文件內容

http://localhost:5173/data.json

到此這篇關於Vue3 異步組件 suspense的文章就介紹到這瞭,更多相關Vue3 異步組件 suspense內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：