每日一听

defineAsyncComponent

defineAsyncComponent 是一个用于定义异步组件的辅助函数，它可以让我们在需要时才加载组件，从而提高应用的加载速度和性能。

异步组件允许你将组件的加载过程延迟到实际需要渲染时，这对于优化大型应用的首屏加载时间非常有帮助。在 Vue 3 中，你可以使用 defineAsyncComponent 方法来定义一个异步组件。

基本使用

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。

const AsyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
}

defineAsyncComponent 方法接收一个返回 Promise 的加载函数。这个 Promise 的 resolve 回调方法应该在从服务器获得组件定义时调用。你也可以调用 reject(reason) 表明加载失败。

<template>
  <component :is="AsyncComponent" />
</template>

ES 模块动态导入

ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件

import { defineAsyncComponent } from 'vue';

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

全局注册

与普通组件一样，异步组件可以使用 app.component() :

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

加载状态与错误处理

defineAsyncComponent 也接受一个配置对象，其中可以包含加载、延迟、超时和错误处理等选项。

const AsyncComponent = defineAsyncComponent({
  // 需要加载的异步组件
  loader: () => import('./MyAsyncComponent.vue'),
  // 加载异步组件时显示的组件
  loadingComponent: LoadingComponent,
  // 加载失败时显示的组件
  errorComponent: ErrorComponent,
  // 显示加载组件前的延迟时间（毫秒）
  delay: 200,
  // 如果提供了超时时间（毫秒），在超过这个时间后会显示错误组件
  timeout: 3000
});

结合路由使用

异步组件非常适合与 Vue Router 结合使用，尤其是在定义路由配置时。你可以在路由配置中直接使用异步组件，从而实现按需加载路由页面。

const routes = [
  {
    path: '/async',
    component: () => import('./views/MyAsyncPage.vue')
  }
];

小结

defineAsyncComponent 是 Vue 3 中一个非常有用的功能，它可以帮助开发者优化应用的加载性能，尤其是对于大型应用或是需要按需加载某些部分的场景。通过上述笔记，你应该能够掌握异步组件的基本使用方法，以及如何利用它来改进你的 Vue 应用。