Teleport 与 Suspense • glownight

Teleport vs Suspense#

	Teleport	Suspense
作用	改变渲染位置（DOM 移动）	处理异步依赖（加载状态）
解决	模态框/通知等脱离父组件层级	异步组件/数据加载的优雅降级
状态	同步，立即渲染	异步，等待完成

代码对比#

Teleport：DOM 位置转移#

<!-- 组件内声明，渲染到 body 下 -->
<template>
  <div class="parent">
    <!-- 遮罩层逻辑在组件内，但 DOM 跑到 body 下 -->
    <Teleport to="body">
      <div class="modal">弹窗内容</div>
    </Teleport>
  </div>
</template>

<!-- 结果 DOM -->
<body>
  <div id="app">...</div>
  <div class="modal">弹窗内容</div>  <!-- 在这里！ -->
</body>

vue

场景：模态框、通知、全屏遮罩（避免 z-index 嵌套问题）

Suspense：异步加载状态#

<template>
  <Suspense>
    <!-- 默认：异步完成显示 -->
    <AsyncComponent />
    
    <!-- 加载中显示 -->
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
// 异步组件
const AsyncComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
);
</script>

vue

场景：代码分割、数据获取、骨架屏

组合使用#

<template>
  <Suspense>
    <template #default>
      <AsyncModal />
    </template>
    <template #fallback>
      <Teleport to="body">
        <div class="loading-overlay">加载中...</div>
      </Teleport>
    </template>
  </Suspense>
</template>

vue

Teleport = 去哪儿渲染
Suspense = 什么时候渲染