1.2.3 新的内置组件

Vue3添加了一些新的内置组件，开发人员可以利用它们来解决一些常见的问题，虽然这些组件的功能在Vue2中也同样可以实现，但一般是以第三方插件进行应用的，而Vue3核心团队已经将其添加到新版本的核心框架中。下面简单罗列一些新添加的内置组件。

1.Fragment

在Vue2中，单文件组件的模板中有且只能有一个根标签来包裹多个子标签，对于下面的代码，div元素则不能省略，否则就会有多个根标签，但从页面显示效果来看，如果外层的div元素不包含自定义样式，那么div元素是没有存在的意义的，因此，Vue2的限制导致组件的页面产生了一层标签嵌套。

Vue3提供了Fragment组件来减少组件外层不必要的根标签，我们可以在组件的模板中使用Fragment组件标签来包裹多个子标签，而在组件最终生成的页面中是不包含Fragment组件标签的，示例代码如下。

Vue3提供了对应的简洁语法，可以使用<></>包裹多个子标签来简化代码，示例代码如下。

在Vue3的组件中，还可以进一步简化代码，其允许用户在模板中直接编写多个根标签，示例代码如下。

2.Teleport

Teleport是瞬移组件，也称为传送门组件，顾名思义，它是一个可以使元素从一个组件转到另一个组件的组件。乍一看这个组件的功能似乎很奇怪，但它有很多的应用场景，如对话框、自定义菜单、警告提示、徽章，以及许多其他需要出现在特殊位置的自定义UI组件。假设现在页面中有两个元素，分别为div元素和button按钮元素，在当前页面中这两个元素是并列元素，代码如下。

但如果想要将button按钮元素放置于div这一目标元素下，则可以直接利用Teleport组件，将button按钮元素内容瞬间移动至目标元素下。例如，设置to属性为“.target-portal”，那么button按钮元素就成了div元素的嵌套子元素，它们不再是并列关系，而是嵌套结构，代码结构如下。

3.Suspense

当等待数据的时间比开发人员希望的时间要长时，应该如何显示为用户定制的加载器呢？在Vue3中无须自定义代码即可实现，只需要通过Suspense组件管理这一过程。该组件除了可以给定默认加载数据后的渲染视图，还可以设置加载数据时的应急视图。例如，在数据加载过程中，会先显示fallback中加载数据时的应急装置组件；在数据加载完毕后，再显示default中默认的渲染视图组件，代码结构如下。也就是说，在Vue3中，开发人员并不需要关心数据加载的状态，新的Vue组合式API将了解组件的当前状态，而且它能够区分组件是正在加载还是已准备好显示。