異步組件
在大型應用中，我們可能需要將應用分割成小一些的代碼塊 并且減少主包的體積，這時候就可以使用異步組件
頂層 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501393.html
標籤：其他
上一篇：JS-回圈陳述句
下一篇：Cookie會話跟蹤技術