vue3新的组件

1.Fragment

- 在Vue2中: 组件必须有一个根标签
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
- 好处: 减少标签层级, 减小内存占用

 没有写根标签，也没有报错，如果是在v2中，我们还需要用一个div来包裹它

事件上是放在一个fragment里面的，因此可以使用多个标签

2.Teleport 

teleport英文中有翻译的意思

  看一下这个页面存在的问题，这个弹窗处于孙子组件的里面。而页面展示的时候还会撑开盒子大小。而我们想要的效果的弹窗处于页面中间，不影响其他组件的运行

而我们就可以使用teleport

 我们把需要传送走的内容放到teleport标签内部，使用to指向它要传送到的地址，我们这里测试一下用body

 很明显传送到body里面了

实现功能

<template><div><button @click="isShow=true">点我弹窗</button><teleport to="body"><div class="mask" v-if="isShow"><div  class="dialog"><h3>我是一个弹窗</h3><h4>一些内容</h4><h4>一些内容</h4><h4>一些内容</h4><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{text-align: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 300px;height: 300px;background-color: green;
}
</style>

 感觉这个效果也可以做一个广告的效果

3.Suspense

Suspendse中文有悬念的意思

 用这个组件来讲清楚Suspendse的内容。首先这俩个都是静态引入，这俩个组件是一起出来的。

然后我们用动态组件的方式来引入它试试看

 这叫动态引入，也叫异步引入

然后是app先出来，然后是child出来

但又一点不好，就是网速很慢的时候，最后的迟迟不出来，用户可能以为没有这个组件，因此我们要解决这个问题，也就是使用suspense

在 suspense里面有俩个插槽，<template v-slot:default><Child/></template>放得成功显示的

<template v-slot:fallback><h3>加载中……</h3></template>类型，加载中，显示的内容

 因为我们是异步引入，那么我们就可以使用promise对象来玩，上面的红框的代码实现的效果就是延迟3秒后出来

总结：

- 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
- 使用步骤：

异步引入组件

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

 使用 Suspense 包裹组件，并配置好 default 与 fallback

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template v-slot:fallback><h3>加载中.....</h3></template></Suspense></div>
</template>