vue3学习笔记 - P3

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内容持续学习…