defineAsyncComponent【Vue3】

学习是打开未来的大门，今天的积累，将会为明天的你带来无限可能。

引言
基本语法
异步组件的用法场景
[defineAsyncComponent 进阶使用：](#defineAsyncComponent 进阶使用：)
[如何与 `<component :is="...">` 配合使用](#如何与 <component :is="..."> 配合使用)
[异步组件 VS 直接导入组件](#异步组件 VS 直接导入组件)
- 直接导入组件
- 异步组件
[异步组件和 `<keep-alive>` 一起使用](#异步组件和 <keep-alive> 一起使用)
总结

引言

defineAsyncComponent 是 Vue3 提供的一个 API，用于定义异步组件，它允许你按需加载组件。也就是说，只有当你真正需要该组件时，Vue 才会去加载它，而不是在初始加载时就全部引入。这可以大大减小首屏加载的体积，提升性能。

基本语法

javascript 复制代码

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => import('./AsyncComponent.vue'));

这会返回一个异步组件对象 AsyncComp，只有在渲染时，Vue 才会加载 AsyncComponent.vue。然后你可以像普通组件一样使用它：

javascript 复制代码

<component :is="AsyncComp" />

异步组件的用法场景

按需加载：只有当用户需要某个特定功能时才加载相关的组件。
拆分代码：比如一个页面包含多个较重的部分，可以把它们拆分成不同的异步组件，在用户点击时再加载。
动态内容渲染：基于用户操作、路由切换、权限控制等，动态决定加载哪些组件。

defineAsyncComponent 进阶使用：

除了基本的动态加载，你还可以给异步组件添加一些额外的配置，处理加载状态、错误状态等。

javascript 复制代码

const AsyncComp = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),    // 异步加载
  loadingComponent: Loading,                       // 加载中的组件
  errorComponent: ErrorPage,                       // 加载失败时显示的组件
  delay: 200,                                     // 延迟显示加载组件的时间
  timeout: 3000                                   // 超过这个时间会显示错误组件
});

解读属性：

loader：加载组件的函数，通常用 import() 来异步加载。
loadingComponent：在异步组件加载时显示的占位组件。
errorComponent：如果加载失败（例如超时），显示的组件。
delay：延迟多久才显示 loadingComponent，避免组件很快就显示加载状态。
timeout：加载超时后显示 errorComponent。

如何与 `<component :is="...">` 配合使用

使用 <component :is="..."> 动态渲染多个组件，可以将异步组件作为其中的一部分：

javascript 复制代码

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const AsyncTextComp = defineAsyncComponent(() => import('./TextComp.vue'));
const AsyncImageComp = defineAsyncComponent(() => import('./ImageComp.vue'));

const currentComp = ref('text');  // 例如根据条件切换
const compMap = {
  text: AsyncTextComp,
  image: AsyncImageComp
};
</script>

<template>
  <component :is="compMap[currentComp]" />
</template>

在这个例子中，AsyncTextComp 和 AsyncImageComp 是异步加载的组件，只有在需要时才会被加载，提升了性能。

异步组件 VS 直接导入组件

直接导入组件

typescript 复制代码

import MyComponent from './MyComponent.vue';

加载方式：当使用 import 导入组件时，Vue 会在页面加载时将所有的组件一起加载到页面中。
优点：
- 简单：用法简单直接，组件在页面加载时就可用。
- 即时可用：组件在首次渲染时就已经加载并准备好使用，适用于较小的应用或者不需要优化加载时间的场景。
缺点：
- 较大的初始加载：如果应用中有很多组件或者组件很重，初始加载时会把所有的组件都加载进来，这会增加页面的加载时间和内存消耗。
- 性能开销：一开始就加载所有组件，可能会影响首屏渲染速度。

异步组件

typescript 复制代码

const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

加载方式 ：异步组件通过动态 import() 来加载组件。只有在需要显示该组件时，Vue 才会去加载它。这样可以大大减少初始加载的体积，提升页面加载速度。
优点：
- 按需加载：只有在需要使用某个组件时才加载它，减少初始页面的资源加载量，提升性能。
- 代码分割：适用于大型应用，可以将应用拆分成多个小的代码块，按需加载，提高页面响应速度。
缺点：
- 首次显示延迟：如果组件是首次加载，会有一个小的延迟，因为需要从网络加载该组件。
- 加载失败处理：需要添加处理异步加载失败、加载中的组件等机制，增加了代码复杂性。

异步组件和 `<keep-alive>` 一起使用

typescript 复制代码

<template>
  <div>
    <button @click="currentComp = 'TextComponent'">Text</button>
    <button @click="currentComp = 'ImageComponent'">Image</button>
    
    <keep-alive>
      <component :is="currentComp" />
    </keep-alive>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const currentComp = ref('TextComponent');

const TextComponent = defineAsyncComponent(() => import('./TextComponent.vue'));
const ImageComponent = defineAsyncComponent(() => import('./ImageComponent.vue'));
</script>

总结

defineAsyncComponent 是一个 Vue3 中用来按需加载组件的工具，它通过动态导入（import()）的方式，能有效地拆分代码和减少首屏加载的体积。我们可以配合 loadingComponent、errorComponent 等属性处理加载中的体验和错误状态，非常适用于大型应用和需要按需加载的场景。

需要时，只需要简单地使用 defineAsyncComponent 来包装组件加载，并将其用于 Vue 中的任何地方，就可以实现高效的组件懒加载。

defineAsyncComponent【Vue3】

目录

引言

基本语法

异步组件的用法场景

defineAsyncComponent 进阶使用：

如何与 <component :is="..."> 配合使用

异步组件 VS 直接导入组件

直接导入组件

异步组件

异步组件和 <keep-alive> 一起使用

总结

如何与 `<component :is="...">` 配合使用

异步组件和 `<keep-alive>` 一起使用