本文主要是介绍Fragment组件和Teleport组件以及Suspense组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Fragment组件
Fragment组件
在vue2中：组件必须有一个根标签
在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
好处：减少标签层级，减小内存占用Teleport组件
Teleport组件
什么是Teleport？ -- Teleport是一种能够将我们的组件html结构移动到指定位置的技术具体案例代码如下：实现一个对话框，位置应该展示body内
<button>点我开启弹窗</button><!-- to="body"会将该html元素展示在body内 -->
<teleport to="body"><div></div>...<button>点我关闭弹窗</button>
</teleport>最终在控制台上看的结构：
<body>...<!-- 会显示在这里 --><div></div>...<button>点我关闭弹窗</button>
</body>备注：to不一定只能写在body，比如你创建一个<div id="box"></div>, 那么可以写成to="#box"Suspense组件
1. 异步引入组件：
import {defineAsyncComponent} from 'vue';
const ChildC = defineAsyncComponent(() => import('./components/ChildC'))2. 使用Suspend包裹组件，并配置好default与fallback具体案例代码如下：
<template><Suspense><template v-slot:default><ChildC /></template><!-- 还没加载出来时会先显示这个 --><template v-slot:fallback><div>稍等！！！加载中</div></template></Suspense>
</template><script>
// 静态引入
// import ChildC from './components/ChildC'
// 动态引入（异步引入）
import {reactive, defineAsyncComponent} from 'vue';
const ChildC = defineAsyncComponent(() => import('./components/ChildC'))export default {name: 'App',components: { ChildC },setup() {const car = reactive({money: 10,name: 'car'})return {car}}
}
</script>这篇关于Fragment组件和Teleport组件以及Suspense组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
