vue3.0 新增组件

Fragment（片断）

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

 
1
2

Teleport（传送门）

 是一个内置组件，使我们可以将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中。让组件的 html 在父组件界面外的特定标签（很可能是 body) 下插入显示

例如 弹窗按钮

// ModalButton.vue




 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

App.vue

 
1
2
3
4
5
6
7
8
9

Suspense（不确定的）

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

 是一个内置组件，用来在组件树中编排异步依赖。它可以在等待组件树下的多个嵌套异步依赖项解析完成时，呈现加载状态。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

AsyncComp.vue

 
1
2
3
4
5
6
7
8

AsyncAddress.vue

 
1
2
3
4
5
6
7
8
9