异步组件
在大型应用中 ，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积 ，这时候就可以使用异步组件
顶层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
（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>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
