异步引入组件

defineAsyncComponent 函数：用于异步引入组件。

Suspense 标签：异步组件加载时，显示的默认内容。

应用场景：当子组件的数据量较大，导致父组件延迟显示时使用。

语法格式

异步引入组件：

import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(() => {
  return import('../components/Child');
});

设置默认内容：

<Suspense>
  <!-- 如果组件加载成功，就显示 default 中的内容 -->
  <template v-slot:default>
    <Child></Child>
  </template>
  <!-- 如果组件正在加载中，就显示 fallback 中的内容 -->
  <template v-slot:fallback>
    <h3>加载中，请稍等...</h3>
  </template>
</Suspense>

异步引入组件：

一、子组件：创建 Child 子组件。

<template>
  <div style="background-color: red;padding: 10px;">
    <h3>我是 Child 子组件</h3>
  </div>
</template>

二、父组件：通过 defineAsyncComponent 异步引入组件。

<template>
  <h3>我是父组件</h3>
  <!-- 使用异步组件 -->
  <Child></Child>
</template>

<script setup>
// 引入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue';
// 动态引入【异步引入】
const Child = defineAsyncComponent(() => {
  return import('../components/Child');
});
</script>

三、最终效果。

注：在控制台的 Network 中，将网络调成 Slow 3G 网络。刷新页面后，就会发现子组件不会影响父组件的显示啦。 

原创作者：吴小糖

创作时间：2024.3.26