vite+ts+vue3 知识点（异步组件）

异步组件

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>

性能优化

注意：当使用了异步组件时，这个组件在打包时就会单独自己成为一个包，这样就避免主包过大，使项目首屏加载太慢。