[Vue] 如何处理异步加载组件【热度: 254】

web框架

关键词：异步加载组件

在 Vue 应用中，异步组件是指那些在声明时不会立即加载，而是在需要的时候才加载的组件。使用异步组件能够帮助你提高应用的加载速度和性能，特别是在处理大型应用和路由懒加载时。Vue 提供了几种处理异步加载组件的方法。

Vue 3 中处理异步组件的方法

使用 defineAsyncComponent 方法

Vue 3 提供了 defineAsyncComponent 方法，使得定义和使用异步组件变得简单。你可以通过传递一个函数，该函数返回一个 import() 调用（返回 Promise），来动态加载组件。

import { defineAsyncComponent } from "vue";

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

// 在组件中使用
export default {
  components: {
    AsyncComponent,
  },
};

加载状态处理

你还可以使用 defineAsyncComponent 的高级用法，提供一个对象来处理加载状态，如显示加载中的提示、错误处理和超时处理。

const AsyncComponent = defineAsyncComponent({
  // 加载异步组件的工厂函数
  loader: () => import("./components/AsyncComponent.vue"),
  // 加载中时要使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时要使用的组件
  errorComponent: ErrorComponent,
  // 在显示 loadingComponent 之前的延迟 | 默认值：200（毫秒）
  delay: 200,
  // 如果提供了超时时间（毫秒），超时后将显示错误组件 | 默认值：Infinity
  timeout: 3000,
});

Vue 2 中处理异步组件的方法

在 Vue 2 中，异步组件的定义略有不同，你可以直接在组件注册时提供一个返回 Promise 的工厂函数。

Vue.component("async-component", () => import("./components/AsyncComponent.vue"));

或者为了处理加载状态，可以提供一个高级的对象形式：

Vue.component("async-component", (resolve, reject) => ({
  // 需要加载的组件 (应该是一个 Promise)
  component: import("./components/AsyncComponent.vue"),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载中组件前的等待时间。默认：200ms。
  delay: 200,
  // 如果提供了超时时间 (毫秒)，超时后会显示错误组件。默认：Infinity
  timeout: 3000,
}));