这一章节建议观看视频教程Vue3 + vite + Ts + pinia + 实战 + 源码_哔哩哔哩_bilibili
异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块 并且减少主包的体积
这时候就可以使用异步组件
顶层 await
在setup语法糖里面 使用方法
<script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()
<script setup> const post = await fetch(`/api/post/1`).then(r => r.json()) </script>
父组件引用子组件 通过defineAsyncComponent加载异步配合import 函数模式便可以分包
<script setup lang="ts"> import { reactive, ref, markRaw, toRaw, defineAsyncComponent } from 'vue' const Dialog = defineAsyncComponent(() => import('../../components/Dialog/index.vue')) //完整写法 const AsyncComp = defineAsyncComponent({ // 加载函数 loader: () => import('./Foo.vue'), // 加载异步组件时使用的组件 loadingComponent: LoadingComponent, // 展示加载组件前的延迟时间，默认为 200ms delay: 200, // 加载失败后展示的组件 errorComponent: ErrorComponent, // 如果提供了一个 timeout 时间限制，并超时了 // 也会显示这里配置的报错组件，默认值是：Infinity timeout: 3000 })
suspense
<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。
<Suspense> <template #default> <Dialog> <template #default> <div>我在哪儿</div> </template> </Dialog> </template> <template #fallback> <div>loading...</div> </template> </Suspense>
