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 网络。刷新页面后，就会发现子组件不会影响父组件的显示啦。
