Vue 的异步组件

1，异步组件介绍

在项目中，有的组件仅在需要时才会加载，这时就需要用到异步组件。

异步组件本质上是一个函数，该函数调用后返回一个Promise，Promise 成功的结果是一个组件对象。一般使用 import() 动态导入组件作为这个 Promise。

// 函数需要返回一个 Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

2，组件中使用

异步组件也可以在组件中使用，比如某些场景下需要获取数据后才能加载某组件。

2.1，Vue2 语法

Vue2官网参考

<script>
// 返回Promise
const AsyncComponent = () => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  });
};

// 返回Promise
const AsyncComponent2 = () => import("./MyComp.vue")

export default {
  components: {
    // Vue会调用该函数，并等待 Promise完成，完成之前该组件位置什么也不渲染
    AsyncComponent,
  },
};
</script>

函数也可以返回有一个配置对象，并处理加载状态。

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

2.2，Vue3 语法

Vue3官网参考

需要使用 defineAsyncComponent 方法来实现，函数同样需要返回一个 Promise。

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

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(async () => {
      const MyComp = await import("./MyComp.vue");
      resolve(MyComp);
    }, 3000);
  })
})

const AsyncComp2 = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)
</script>

也可以全局注册

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

也能处理加载状态

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

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

3，路由中使用

路由懒加载

{
  name: "Home",
  path: "/",
  // webpackChunkName 用于分包
  component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),
  meta: { title: "首页" },
}

Vue Router 只会在第一次进入这个页面时调用这个函数，然后使用缓存数据。也就是说，已经加载过的组件不会重新加载。

3.1，vue3语法

封装实现异步页面。

// utils/index.js
import { defineAsyncComponent } from "vue";
import Loading from "../components/Loading.vue";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({
  trickleSpeed: 50,
  showSpinner: false,
});

function getAsyncPage(path) {
  return defineAsyncComponent({
    loader: async () => {
      NProgress.start();
      await delay();
      const comp = await import(path);
      NProgress.done();
      return comp;
    },
    loadingComponent: Loading, // 当promise在pending状态时，将显示这里的组件
  });
}

import { getAsyncPage } from "../util";

const Home = getAsyncPage("../views/Home.vue");
const About = getAsyncPage("../views/About.vue");

export default [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

---

以上。