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>