vue3新的组件

1.Fragment

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

2.Teleport

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

  <teleport to="移动位置">
  	<div v-if="isShow" class="mask">
  		<div class="dialog">
  			<h3>我是一个弹窗</h3>
  			<button @click="isShow = false">关闭弹窗</button>
  		</div>
  	</div>
  </teleport>
  

3.Suspense

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

• 使用步骤：

  • 异步引入组件

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

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

    <template>
    	<div class="app">
    		<h3>我是App组件</h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>加载中.....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>
    

注意：按照上面的代码我们实现了一个异步渲染，此时 Child.vue 的这个异步组件内部的setup可以返回一个Promise实例，也可以用async/await

//采用 返回一个Promise实例
setup() {
  const p = new Promise((resolve)=>{
    setTimeout(() => {
      resolve({
        
      })
    }, 1000);
  })
  return p;
}
//采用 async/await
async setup() {
  const p = new Promise((resolve)=>{
    setTimeout(() => {
      resolve({

      })
    }, 1000);
  })
  const data = await p
  console.log(data)
  return data;
}