Vue——新的组件

一.Fragment

• 在Vue2中: 组件必须有一个根标签

• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

• 好处: 减少标签层级, 减小内存占用

二.Teleport

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

代码演示：

teleport指定的跳转位置是‘body’位置，所以跳过了其他包裹的层级跳到了‘body’：

 

三.Suspense

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

使用步骤：

• 异步引入组件：

• 使用使用Suspense包裹组件，并配置好default 与 fallback：

 

defalut:放置要展示的页面

fallback:如果组件很快返回则返回defalut中组件的东西，如果没有立即返回东西到页面那么久返回fallback中的内容

• 以上为了展示效果，为Child组件设置了延迟：

 setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）