Vue 异步组件

Happier2024年9月30日...大约 1 分钟

Vue 提供了一个可以异步加载组件的机制，即异步组件

异步组件可以让我们在需要的时候才加载组件，从而提高用户的体验

基本用法

单文件组件

<!-- App.vue -->
<template>
  我是父组件
  <Student></Student>
</template>

<script setup>
import { defineAsyncComponent } from "vue";
const Student = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(import("./components/Student.vue"));
    }, 2000);
  });
  // ES 模块动态导入也会返回一个 Promise
  // return import('./components/Student.vue')
});
</script>

<!-- Student.vue -->
<template>
  <div>我是子组件</div>
</template>

HTML

<body>
  <div id="app">
    我是父组件
    <Student></Student>
  </div>
  <script type="module">
    import {
      createApp,
      defineAsyncComponent,
    } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
    createApp({
      components: {
        Student: defineAsyncComponent(() => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(import("./Student.js"));
            }, 2000);
          });
          // ES 模块动态导入也会返回一个 Promise
          // return import('./Student.js')
        }),
      },
    }).mount("#app");
  </script>
</body>

// Student.js
export default {
  template: `
        <div>我是子组件</div>`,
};

加载与错误状态

异步组件在加载和错误状态时，可以显示不同的内容

defineAsyncComponent({
  // 加载函数
  loader: () => import("./MyComponent.vue"),
  // 加载异步组件时显示的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件之前的延迟时间，默认为 200ms
  delay: 200,
  // 加载失败时显示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个超时时间（单位为毫秒），并且加载组件超过了设定时间，将显示错误组件
  timeout: 3000,
});