vue+ts+vite 异步组件&suspense保姆级教程

什么是异步组件及作用

• 1、异步组件是vue的一种优化方法，比如可以运用在首屏加载等场景
• 2、异步组件可以减少打包的结果，会将异步组件分开打包，会采用异步的方式加载组件
• 可以有效的解决一个组件过大的问题，不使用异步组件，如果组件功能比较多打包出来的结果就会变大。
• 3、异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件分割加载。

异步组件示例

1.在public文件夹下新建demo.json 文件内容如下

{
    "data":{
        "name":"张三",
        "age":22,
        "url":"http://baidu.com",
        "desc":"11月27日，世界杯小组赛"
    }
}

2.在components文件夹下新建 server/axios.ts 内容如下

export const axios = {
    get<T>(url: string): Promise<T> {
        return new Promise((resolve) => {
            const xhr = new XMLHttpRequest()
            xhr.open('GET', url)
            xhr.onreadystatechange = () => {
                /**
                 * 0--- (未初始化)还没有调用send()方法
                 * 1---(载入)已调用send()方法，正在c
                 * 2---(载入完成)send()方法执行完成，已经接收到全部响应内容
                 * 3---(交互)正在解析响应内容
                 * 4---(完成)响应内容解析完成，可以在客户端调用了
                 */
                if (xhr.readyState === 4 && xhr.status == 200) {
                    setTimeout(() => {
                        resolve(JSON.parse(xhr.responseText))
                    }, 2000)
                }
            }
            xhr.send(null)
        })
    }
}

3.在components文件夹下新建 sync/index.vue

<template>
    <div style="padding: 50px">
        <h1>{{ data.name }}</h1>
        <h1>{{ data.age }}</h1>
        <h1>{{ data.url }}</h1>
        <h1>{{ data.desc }}</h1>
    </div>
</template>

<script setup lang="ts">
import { axios } from "../server/axios"
interface Data {
    data: {
        name: string
        age: number
        url: string
        desc: string
    }
}
const { data } = await axios.get<Data>("./demo.json")
</script>

<style scoped lang="scss"></style>

4.在app.vue中引入

<template>
    <Suspense>
        <!-- 组件最终展示什么 -->
        <template #default><SyncVue></SyncVue></template>
        <!-- 在加载的过程中组件要做什么 -->
        <template #fallback>
            <el-empty description="description" />
        </template>
    </Suspense>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue"
const SyncVue = defineAsyncComponent(
    () => import("./components/sync/index.vue"),
)
</script>

<style scoped lang="scss"></style>

展示效果

加载中

加载完成