三十六、异步组件

我不会vue3

发布日期: 2024-12-06

更新日期: 2024-12-06

文章字数: 861

阅读时长: 3 分

阅读次数:

异步组件：指的是在需要时才加载的组件。

基本用法

在 Vue 中，可以通过 defineAsyncComponent 来定义一个异步组件

import { defineAsyncComponent } from 'vue'

// 之后就可以像使用普通组件一样，使用 AsyncCom 这个异步组件
const AsyncCom = defineAsyncComponent(()=>{
  // 这是一个工厂函数，该工厂函数一般返回一个 Promise
  return new Promise((resolve, reject)=>{
    resolve(/* 获取到的组件 */)
  })
})

ES模块的动态导入返回的也是一个 Promise，所以多数情况下可以和 defineAsyncComponent 配合着一起使用

import { defineAsyncComponent } from 'vue'

// 之后就可以像使用普通组件一样，使用 AsyncCom 这个异步组件
const AsyncCom = defineAsyncComponent(()=>{
  import('.../MyCom.vue')
})

快速上手

src/
  ├── components/
    │   ├── Home.vue
│   └── About.vue
├── App.vue
└── main.js

App.vue

<template>
  <div id="app">
    <button @click="currentComponent = Home">访问主页</button>
    <button @click="currentComponent = About">访问关于</button>
    <component :is="currentComponent" v-if="currentComponent"></component>
  </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
const currentComponent = shallowRef(null)
</script>

在 App.vue 中，通过 import 导入了 Home 和 About，这相当于在应用启动时立即加载所有被导入的组件，这会导致初始加载时间较长，特别是在组件数量较多的时候。

重构 App.vue，使用异步组件来进行优化：

<template>
  <div id="app">
    <button @click="loadComponent('Home')">访问主页</button>
    <button @click="loadComponent('About')">访问关于</button>
    <component :is="currentComponent" v-if="currentComponent"></component>
  </div>
</template>

<script setup>
import { shallowRef, defineAsyncComponent } from 'vue'
// import Home from './components/Home.vue'
// import About from './components/About.vue'

const currentComponent = shallowRef(null)
/**
 *
 * @param name 组件名
 */
const loadComponent = (name) => {
  currentComponent.value = defineAsyncComponent(() => import(`./components/${name}.vue`))
}
</script>

相比之前一开始就通过 import 导入 Home 和 About 组件，现在改为了点击按钮后才会 import，从而实现了懒加载的特性。

其他细节

1. 全局注册

与普通组件一样，异步组件可以使用 app.component( ) 全局注册：

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
                                                 ))

2. 可以在父组件中定义

<script setup>
import { defineAsyncComponent } from 'vue'

// 在父组件里面定义了一个异步组件
const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
	<!-- 使用异步组件就像使用普通组件一样 -->
  <AdminPage />
</template>

3. 支持的配置项

defineAsyncComponent 方法支持传入一些配置项，此时不再是传递工厂函数，而是传入一个配置对象

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  // 如果提供了一个加载组件，它将在内部组件加载时先行显示。
  loadingComponent: LoadingComponent,

  // 展示加载组件前的延迟时间，默认为200ms
  // 在网络状况较好时，加载完成得很快，加载组件和最终组件之间的替换太快可能产生闪烁，反而影响用户感受。
  // 通过延迟来解决闪烁问题
  delay: 200,

  // 加载失败后展示的组件
  // 如果提供了一个报错组件，则它会在加载器函数返回的 Promise 抛错时被渲染。
  errorComponent: ErrorComponent,

  // 你还可以指定一个超时时间，在请求耗时超过指定时间时也会渲染报错组件。
  // 默认值是：Infinity
  timeout: 3000
})