vue3中的Fragment、Teleport、Suspense新组件-编程知识

Fragment组件

· 在Vue2中: 组件必须有一个根标签

· 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

· 好处: 减少标签层级, 减小内存占用

<template><div style="font-size: 14px;"><p> 组件可以没有根标签</p></div><div style="font-size: 14px;"><p>内部会将多个标签包含在一个Fragment虚拟元素中</p></div>
</template>

Fragment显示效果：

Teleport组件：

· Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签下插入显示

to 允许接收值：

期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。

提示：

<Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。理想情况下，这应该是整个 Vue 应用 DOM 树外部的一个元素。

如果目标元素也是由 Vue 渲染的，你需要确保在挂载 <Teleport> 之前先挂载该元素。

<template><button style="font-size: 14px;position: absolute;" @click="modalOpen = true">打开弹窗</button><teleport to="body"><div v-if="modalOpen" class="modal"><div>弹窗打开咯<button @click="modalOpen = false">关闭</button></div></div></teleport>
</template><script lang="ts">
import { defineComponent, ref } from 'vue'
// vue3.0版本语法
export default defineComponent({name: '组件名',setup () {const modalOpen = ref(false)return {modalOpen}}
})
</script><style>
.modal {position: absolute;top: 0; right: 0; bottom: 0; left: 0;background-color: rgba(0,0,0,.5);display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 14px;
}.modal div {display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: white;width: 300px;height: 300px;padding: 5px;
}
</style>

初始页面：

点击打开弹窗：

可以看到弹窗的html内容插入在body标签下了

Suspense组件

· 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。

defineAsyncComponent：

Vue3的defineAsyncComponent函数为我们提供了一个轻松且高效的方式来加载组件。

它允许我们使用异步方式来加载组件，从而提高我们应用程序的性能。

我们只需要将定义组件的过程与组件注册解耦，即可实现异步加载组件。

对于大型和复杂的Vue应用程序，异步加载组件是一个非常优秀的策略，

它可以显著提高应用程序的性能。

父组件代码：

<template><Suspense><template v-slot:default><!-- 同时加载两个组件 --><div style="font-size: 14px;"><AsyncComp/><AsyncAddress/></div></template><template v-slot:fallback><h1 style="font-size: 14px;">加载中...</h1></template></Suspense>
</template><script lang="ts">
/* 
异步组件 + Suspense组件Vue3的defineAsyncComponent函数为我们提供了一个轻松且高效的方式来加载组件。
它允许我们使用异步方式来加载组件，从而提高我们应用程序的性能。
我们只需要将定义组件的过程与组件注册解耦，即可实现异步加载组件。
对于大型和复杂的Vue应用程序，异步加载组件是一个非常优秀的策略，
它可以显著提高应用程序的性能。
*/
// import AsyncComp from './AsyncComp.vue'
import AsyncAddress from './AsyncAddress.vue'
import { defineComponent, defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
// vue3.0版本语法
export default defineComponent({components: {AsyncComp,AsyncAddress},setup() {return {}},
})
</script>

AsyncComp子组件：

<template><h2>{{ msg }}</h2>
</template><script lang="ts">
import { defineComponent } from 'vue';
// vue3.0版本语法
export default defineComponent({name: "AsyncComp",setup() {// return new Promise((resolve, reject) => {//   setTimeout(() => {//     resolve({//       msg: 'AsyncComp:abc'//     })//   }, 1000)// })return {msg: "AsyncComp:abc",};},
});
</script>

AsyncAddress子组件：

<template><h2>AsyncAddress：{{ data }}</h2>
</template><script lang="ts">
import { defineComponent } from 'vue';
// vue3.0版本语法
export default defineComponent({name: "AsyncAddress",async setup() {function getData (){return new Promise((resolve, reject) => {setTimeout(() => {resolve({data: 'abc'})}, 5000)})}// 模拟接口const result = await getData()return {data: result,};},
});
</script>