异步引入组件
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