异步组件
json假数据
{
"data": {
"name": "梁延涛",
"age": 25,
"url": "https://img1.baidu.com/it/u=3451941013,2556777356&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=541",
"desc": "堕落是不需要理由的,但是,不堕落却是有原因的。对处于青春期的人来说,要是没有理由的话,谁都会变得堕落。"
}
}
子组件
<template>
<div>
<div>{{ data.name }}</div>
<img :src="data.url" alt="">
<div>{{ data.age }}</div>
<div>{{ data.desc }}</div>
</div>
</template>
<script setup lang="ts">
import axios from 'axios'
interface Data {
data: {
name?: string,
age?: number,
url?: string,
desc?: string
}
}
// 使用顶层 await 组件就会变成异步组件
const { data } = await axios.get<Data>('./data.json').then((res) => {
return res.data
})
</script>
<style scoped lang="less">
</style>
父组件
<template>
<div>
<!-- 异步组件必须使用 Suspense 包裹 -->
<Suspense>
<!-- 第一个插槽用做存放异步组件 -->
<template #default>
<asyncVue></asyncVue>
</template>
<!-- 第二个插槽表示加载数据时要做的事 -->
<template #fallback>
<!-- ant design 骨架屏 -->
<a-skeleton avatar :paragraph="{ rows: 4 }" />
</template>
</Suspense>
<!-- <a-skeleton avatar :paragraph="{ rows: 4 }" /> -->
</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
// import() import函数模式可以写在代码逻辑里
const asyncVue = defineAsyncComponent(() => import('@/components/asyncVue.vue'))
</script>
<style scoped lang="less">
</style>
性能优化
注意:当使用了异步组件时,这个组件在打包时就会单独自己成为一个包,这样就避免主包过大,使项目首屏加载太慢。