Vue3学习（三）：新的组件：Fragment、Teleport、Suspense

1.Fragment

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

2.Teleport

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

  
  	
  
  		
  
  			
  我是一个弹窗
  			关闭弹窗
  		
  	
  
  

3.Suspense

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

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    

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