vue3学习笔记——第三节

• 1. 内置组件
• • • 1. Fragment
    • 2. Teleport：传送
    • 3. Suspense（试验性）
• 999. vue3内容持续学习...

1. 内置组件

1. Fragment

• 在vue2中：组件必须要有一个根标签
• 在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层级，减小内存占用

2. Teleport：传送

• 什么是Teleport？—— Teleport是一种能够将我们的组件html结构移动到指定位置的技术
• 举例：项目中的toast盒子，toast是在深度嵌套的 div 中渲染的，而toast的部分样式是以相对于父级的 div 设置，在使用时很有可能因为深度嵌套产生困扰。Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，

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

3. Suspense（试验性）

• 在正确渲染组件之前进行一些异步请求是很常见的事。组件通常会在本地处理这种逻辑，绝大多数情况下这是非常完美的做法。

• Suspense组件提供了另一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。

• Suspense组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

• 一个常见的异步组件用例：

<template>
  	<suspense> //suspense标签包裹
    	<template #default> //该组件内容会尽可能展示，如果无法显示，则展示fallback中内容
      		<todo-list /> //等待展示的异步组件
    	</template>
    	<template #fallback> //作为备用展示
      		<div>加载中，请稍后...</div>
    	</template>
  	</suspense>
</template>

<script>
export default {
  	components: {
    	TodoList: defineAsyncComponent(() => import('./TodoList.vue'))
  	}
}
</script>

• 另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise。通常这是通过 async 实现的，而不是显式地返回一个 Promise

999. vue3内容持续学习…

标签：Teleport,第三节,展示,标签,笔记,Suspense,vue3,组件
来源： https://blog.csdn.net/Twi_TiAmo/article/details/120727698