Vue内置组件Teleport和Suspense

news2025/6/6 11:38:23

一. 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>