1.Teleport

  • 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
  • to属性就是要传送的位置目标，用css选择器
    1. <teleport to="移动位置">
    2.   <div v-if="isShow" class="mask">
    3.       <div class="dialog">
    4.           <h3>我是一个弹窗</h3>
    5.           <button @click="isShow = false">关闭弹窗</button>
    6.       </div>
    7.   </div>
    8. </teleport>

    实例: 给界面(body)添加一个居中弹出

    ```vue 

  1. <a name="QRBnd"></a>
  2. # 2.Suspense
  4. -  等待异步组件时渲染一些额外内容，让应用有更好的用户体验 
  5. -  使用步骤： 
  6.    -  异步引入组件  
  7. ```javascript
  8. import {defineAsyncComponent} from 'vue'
  9. const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
  • 使用Suspense包裹组件，并配置好default 与 fallback 
    1. <template>
    2. <div class="app">
    3.   <h3>我是App组件</h3>
    4.   <Suspense>
    5. <!-- v-slot: 或者 # -->
    6.       <template v-slot:default>
    7.           <Child/>
    8.       </template>
    9.       <template v-slot:fallback>
    10.           <h3>加载中.....</h3>
    11.       </template>
    12.   </Suspense>
    13. </div>
    14. </template>

    3.Fragment

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

image.png