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来占据页面,不让首页白屏,对用户造成不友好的体验。
vue3 Composition API suspense component 与 teleport component_第1张图片
传送门—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找到这个公共组件的唯一索引。
vue3 Composition API suspense component 与 teleport component_第2张图片
多个 teleport 传送门组件可以将内容都挂载到一个目标上,多个 teleport 组件内容就是兄弟节点,先挂载的在前面,后挂载的在后面。
相当于同一个ID下面挂载了两个组件,这个特性特别适合用来封装dailog或者是modal框,减少z-index对页面的影响。

你可能感兴趣的:(javascript,前端,html)