非同步組件

在大型應用中，我們可能需要將應用分割成小一些的代碼塊 並且減少主包的體積，這時候就可以使用非同步組件

頂層 await：在setup語法糖裡面 使用方法，<script setup> 中可以使用頂層 await。結果代碼會被編譯成 async setup()

在項目進行打包後 會生成打包後的文件：

dist/index.html  程式入口 
dist/assets/index.e0b7c3a3.css 
dist/assets/index.c3955c07.js  主邏輯

在用戶訪問的時候，會載入index.html，html回去載入index.c3955c07.js ，如果這個文件太大，就會出現白屏。可以通過非同步組件來優化。

（1）在public\data.json

[
    {
        "name":"模擬後端介面1"
    },
    {
        "name":"模擬後端介面2"
    },
    {
        "name":"模擬後端介面3"
    },
    {
        "name":"模擬後端介面4"
    }
]

（2）src\components\A\server.ts建立請求介面

type NameList = {
    name: string
}

export const axios = (url: string): Promise<NameList[]> => { //傳入url，返回NameList數組
    return new Promise((resolve) => {
        let xhl: XMLHttpRequest = new XMLHttpRequest() // 去調用介面
        xhl.open('GET', url) // 獲取數據
        xhl.onreadystatechange = () => { // 變化的時候就調用
            if (xhl.readyState === 4 && xhl.status) { // 調用完成，且介面正常
                setTimeout(() => {
                    resolve(JSON.parse(xhl.responseText)) // 返回的格式
                }, 2000);
            }
        }
        xhl.send(null) //發送數據
    })
}

（3）在src\components\A\index.vue文件

<template>
    <div>
        我是組件A
        <div :key="item.name" v-for="item in list">
            {{item.name}}
        </div>
    </div>
</template>


<script setup lang="ts">
import { axios } from './server';
const list = await axios('./data.json')
console.log(list)

</script>


<style scoped lang="less">

</style>

（4）在src\App.vue引用

<template>
  <div>
    <Suspense>
      <template #default>
        <!-- 組件載入完成時候調用 -->
        <A></A>
      </template>
      <template #fallback>
        <!-- 組件載入的時候調用，載入完成後就會替換掉 -->
        <div>
          loading...
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
// import A from './components/A/index.vue'  // 改成非同步組件，不能這麼引入，數據顯示不出來
import { ref, defineAsyncComponent } from 'vue'
const name = ref<string>('header')

const A = defineAsyncComponent(() => import('./components/A/index.vue'))  // 引入後，還需要配合suspense使用
// 只能通過import函數形式引入，單遇到awite的時候，把我們的邏輯拆分出去，打包的時候就多包
</script>