vue3 Composition API suspense component 与 teleport component

Vue3 Composition API

异步组件加载的解决方案 — suspense component

在Vue3中提供了一个新特性suspense，它允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验，不需要多余的导入，直接在HTML之中使用即可，方便简单省去了很多判断。

最简单的实现：骨架屏的实现。一般想到骨架屏就是根据loading的状态来显示不同的组件，我们平常的思路就是使用v-if v-else来实现组件的显示与否。

但是Vue3提供的suspense组件帮我们节省了很多判断，如下图所示：
suspense组件中提供了两个内置的template一个是默认的default template，
一个是回退信息显示的fallback template，就是在loading的时候我们页面显示的模板，当我们拿到loading完成的信息的时候，就会展示default template中的组件，default template中的组件肯定是需要得到异步加载的信息后才能回显，这就是suspense component 的作用，帮我们省去了很多判断，让代码更加简洁。
当然我们使用的< Event/>组件是有需要等待接口数据，event组件返回的是一个promise对象，在返回的这个时间差中，我们回显示fallback template来占据页面，不让首页白屏，对用户造成不友好的体验。

传送门—teleport component
这也是Vue3 内置的心特性，主要应用于一些HTML需要在其他地方渲染，将teleport标签下的元素传送到指定位置。我们封装了一些公共的模块之后，可以使用传送门组件，将公共的组件传输到不同的地方。

Teleport具有一个必填属性- to
to 需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 内容的目标元素

由于我们在#end-of-body中传递了代码，因此 Vue会找到包含在index.html中的#end-of-body div，它会把 Teleport 内的所有代码渲染到该div中,相当于end-of-body是个Vue找到这个公共组件的唯一索引。

多个 teleport 传送门组件可以将内容都挂载到一个目标上，多个 teleport 组件内容就是兄弟节点，先挂载的在前面，后挂载的在后面。
相当于同一个ID下面挂载了两个组件，这个特性特别适合用来封装dailog或者是modal框，减少z-index对页面的影响。