[vue3] Fragment 和 Teleport 和 Suspense

Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用
• vue框架已经做好的处理,作为程序员不需要写代码

Teleport

• 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

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

• 使用步骤：

  • 异步引入组件

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

微信扫一扫,免费保护车主号码隐私的挪车码即可到手免费使用