从Vue2到Vue3【五】——新的组件（Fragment、Teleport、Suspense）

系列文章目录

内容	链接
从Vue2到Vue3【零】	Vue3简介
从Vue2到Vue3【一】	Composition API（第一章）
从Vue2到Vue3【二】	Composition API（第二章）
从Vue2到Vue3【三】	Composition API（第三章）
从Vue2到Vue3【四】	Composition API（第四章）

文章目录

系列文章目录
前言
一、Fragment
二、Teleport
三、Suspense
总结

前言

随着Vue 3的发布，我们迎来了一套强大且令人兴奋的组合式API，这为开发者带来了更多灵活性和可维护性。Vue 3的组合式API不仅改变了我们编写Vue组件的方式，还引入了一些新的组件和一些小的但实用的改变。在这篇文章中，我们将深入探讨vue3新的组件以及带来的一些其他小的变化，让我们一起开始这个令人兴奋的学习之旅吧！

一、Fragment

Fragment(片段)
- 它允许我们在Vue模板中返回多个元素，而无需添加额外的包裹元素。(不再需要根标签)
  
  我们可以将多个元素作为Fragment的子元素来返回，并且Fragment本身不会被渲染到DOM中。这样可以避免引入不必要的父元素，减少标签层级，使得模板结构更加清晰，减小内存占用。

二、Teleport

Teleport(传送门)
- Teleport组件允许我们将子元素渲染到DOM树的指定位置，而不是直接在当前组件的模板中渲染。
这对于需要在组件外的指定元素中渲染内容（比如弹出层、模态框等）非常有用。我们可以使用Teleport组件的to属性来指定目标元素的选择器或DOM节点。

案例：将dialog组件中的弹出层传送到body身上
dialog.vue组件代码

<template><div><button @click="isShow = true">点我弹个窗</button><teleport to="body">   <div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><button @click="isShow = false">关闭弹窗</button></div></div></teleport></div>
</template><script>import {ref} from 'vue'export default {name:'diaLog',setup(){let isShow = ref(false)return {isShow}}}
</script><style>.mask{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);}.dialog{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 300px;height: 300px;background-color: green;}
</style>

请添加图片描述

传送到body身上的mask遮罩层和#app同级，但是即使设置样式时有加scoped,样式依然生效

Teleport只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 Teleport包含了一个组件，那么该组件始终和这个使用了 teleport 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。
这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

禁用 Teleport
在某些场景下可能需要视情况禁用 Teleport。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 Teleport动态地传入一个 disabled prop 来处理这两种不同情况。

<Teleport :disabled="isMobile">...
</Teleport>

disabled为true则禁止传送，并且teleport内的内容在原地照常显示

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

多个 Teleport 共享目标
一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 Teleport 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：
child组件

<template><div class="child"><h3>我是Child组件</h3><teleport to = ".modals"><div>1</div></teleport><teleport to=".modals"><div>2</div></teleport><teleport to=".modals"><div>3</div></teleport><Son/></div>
</template>

App组件

<template><div class="app"><h3>我是App组件</h3><div class="modals"></div><Child/></div>
</template>

渲染的结果为（依次传送）：

在这里插入图片描述

注意点
teleport在使用时，传送（to）的地方一定要先挂载好，否则当你未挂载好就要to时，会找不到要传送的地方，就会报错

比如说：to的地方后渲染，在传送时就会找不到目标节点

		<teleport to=".header"><div>3</div></teleport><div class="header"></div>

改成这样，就正常传送了

		<div class="header"></div><teleport to=".header"><div>3</div></teleport>

三、Suspense

Suspense(悬念)
- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

Suspense组件允许我们在异步加载组件时显示一个占位符，直到组件加载完成。这个占位符可以是一个自定义的loading组件或者其他内容。当异步组件加载完成后，Suspense组件会自动替换占位符为实际组件。这提供了更优雅的方式来处理异步加载的组件，并且可以方便地显示加载状态。

使用场景：当数据还没请求回来时，做一个loading的场景
使用步骤：

1.异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

2.使用Suspense包裹组件，并配置好default与 fallback
default里的内容是要显示的，fallback里的内容是loading的

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>稍等，加载中...</h3></template></Suspense></div>
</template><script>// import Child from './components/Child'//静态引入import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入export default {name:'App',components:{Child},}
</script><style>.app{background-color: gray;padding: 10px;}
</style>

child组件里，可以搭配setup使用

<template><div class="child"><h3>我是Child组件</h3>{{sum}}</div>
</template><script>import {ref} from 'vue'export default {name:'chIld',async setup(){let sum = ref(0)// 模拟请求服务器数据 服务器返回sumlet p = new Promise((resolve)=>{setTimeout(()=>{resolve({sum})},3000)})return await p}}
</script><style>.child{background-color: skyblue;padding: 10px;}
</style>

由于这里child的组件返回的数据是异步的，child组件一直加载不好，所以在child加载期间，一直显示loading的页面

请添加图片描述

也不一定要有异步请求的时候搭配setup用Suspense，有时候一个组件太庞大了，加载的很慢，就可以利用异步加载这个庞大的组件

假设这个child.vue组件是一个很庞大的组件，由于“木桶效应”，加载页面的速度取决于耗时最长的那个，所以耗时长的组件可以异步加载，先用loading代替其的位置

<template><div class="child"><h3>我是Child组件</h3>{{sum}}</div>
</template><script>import {ref} from 'vue'export default {name:'chIld',setup(){let sum = ref(0)return {sum}}}
</script><style>.child{background-color: skyblue;padding: 10px;}
</style>