什么是异步组件及作用
- 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>
展示效果
加载中
加载完成