Vue内置组件Teleport和Suspense

一. Vue内置组件Teleport

• 1. 认识Teleport( teleport：允许我们把组件的模板渲染到特定的元素上)

  • 1.1. 在组件化开发中，我们封装一个组件A，在另外一个组件B中使用

    • 组件A中template的元素，会被挂载到组件B中template的某个位置；
    • 最终我们的应用程序会形成一颗DOM树结构；

  • 1.2. 某些情况下，希望组件不是挂载在这个组件树上，可能是移动到Vue app之外的其他位置；

    • 比如移动到body元素上，或者我们有其他的div#app之外的元素上；
    • 这种场景可以通过teleport来完成；

  • 1.3.Teleport的解释

    • 它是一个Vue提供的内置组件，类似于react的Portals;
    • teleport翻译过来是心灵传输、远距离运输的意思：
      • 它有两个属性：
        • to： 指定将其中的内容移动到的目标元素，可以使用选择器
        • disabled: 是否禁用teleport的功能

  • 1.4. 多个teleport

    • 将多个teleport应用到同一个目标上(to的值相同), 那么这些目标会进行合并：

      <template><div class="app"><div class="hello-word"><p class="content"><teleport to="body"><hello-word></hello-word></teleport><teleport to="#abc"><hello-word></hello-word></teleport><teleport to="#abc"><h2>哈哈哈哈</h2></teleport></p></div></div></template>
    

    

二. Vue内置组件Suspense

• Suspense：异步组件

• 1.1. 目前Suspense显示的是一个实验性的特性，API随时可能会修改

• 1.2. Suspense是一个内置的全局组件，该组件有两个插槽：

  • default: 如果default可以显示，默认显示default的内容
  • fallback: 如果default无法显示，则显示fallback插槽的内容（fallback中文翻译：应急方案）

    <template><div class="app"><!-- app在解析这个组件，需要从服务器下载下来在解析这个组件，他需要有一个下载的过程，还没下载下来需要显示一个默认的组件，--><!-- fallback:应急方案 在文件还没加载过来或者还没下载下来时候显示这个插槽内容  --><suspense><template #default><async-home></async-home></template><template #fallback><h2>Loading </h2></template></suspense></div></template><script setup>import { defineAsyncComponent } from 'vue';const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))</script>