Vue学习记录之九（内置组件suspense，代码分包）

Suspense 和 telepot是一样的，都是Vue3新增的内置组件，而Suspense 目前还处于实验性阶段，未来可能还有会变动。
Suspense 是一个用于等待异步组件加载的组件，它可以通过设置 fallback 插槽来显示加载中的界面。当异步组件加载完成前，Suspense 会显示 fallback 插槽中的内容，加载完成后则显示 default 插槽中的内容。这使得开发者可以在等待异步数据加载时提供更好的用户体验，例如显示加载动画或提示信息‌。

Teleport 则是一个用于控制组件渲染位置的组件，它可以将组件的内容挂载到任意 DOM 节点下，而不受父组件的限制。这解决了在某些情况下组件渲染位置固定的问题，使得组件的结构更加灵活‌1。

因此，虽然 Suspense 和 Teleport 都与异步操作相关，但 Suspense 主要用于处理异步组件的加载，而 Teleport 用于控制组件的渲染位置，它们不是同一类型的异步组件‌

一、异步组件

使用场景，在数据展示之前，所显示的骨架屏，数据加载完成以后再显示正常的数据。为了提高用户的体验。

public下的资源可以直接通过地址来访问，不编译。

1、先构建一个骨架图

效果如上：为了演示，没有写css.路径为 components/expame/skeleton.vue

<template>
    <div class="sk">
        <div class="sk-2">
            <div>11</div>
            <div>222</div>
        </div>
        <hr>
        <div class="sk-3">333</div>
        <div class="sk-3">44444</div>
    </div>
</template>
<script setup lang='ts'>
import {
    ref,reactive } from 'vue'

</script>
<style scoped>
.sk-2{
   
    background: red;
}
</s