辽宁市营商环境建设局网站石家庄展为网络科技有限公司
在 Vue 3 中，<teleport> 和 <suspense> 是两个非常实用的内置组件，用于解决一些在组件结构和异步渲染上的特殊需求。下面简单介绍一下它们的作用和使用场景。
🌌 1. <teleport>：传送门
🧠 作用：
<teleport> 允许你把组件的 子内容 渲染到 DOM 中的 其他位置，而不是当前位置。这在实现模态框、弹窗、浮层等场景时非常有用。
✅ 使用场景：
-
模态弹窗（弹窗通常不是跟随组件结构，而是直接插入到
<body>） -
Toast 提示
-
下拉菜单 / Tooltip
✍️ 示例：
<template><div><button @click="show = true">打开弹窗</button><teleport to="body"><div v-if="show" class="modal"><p>这是一个弹窗</p><button @click="show = false">关闭</button></div></teleport></div>
</template><script setup>
import { ref } from 'vue'
const show = ref(false)
</script><style>
.modal {position: fixed;top: 30%;left: 30%;background: white;border: 1px solid #ccc;padding: 20px;z-index: 999;
}
</style>
📌 关键点：
-
to="body"表示要把内容“传送”到document.body下。 -
Teleport 不会打乱组件的逻辑结构，只是改变 DOM 的挂载位置。
🌀 2. <suspense>：异步组件的“占位器”
🧠 作用：
当你使用异步组件时，Vue 在组件加载完成之前，可以通过 <suspense> 显示一个备用的 loading 状态，提供更好的用户体验。
✅ 使用场景：
-
异步加载组件（比如路由懒加载）
-
加载网络数据的组件
-
服务端渲染（SSR）场景下控制占位渲染
✍️ 示例：
<template><Suspense><template #default><AsyncComp /></template><template #fallback><div>加载中...</div></template></Suspense>
</template><script setup>
const AsyncComp = defineAsyncComponent(() =>import('./MyAsyncComponent.vue')
)
</script>
📌 关键点：
-
#default是实际的组件内容。 -
#fallback是加载期间显示的备用内容。 -
<suspense>只支持 Vue 3，Vue 2 没有这个功能。
总结对比：
| 功能 | <teleport> | <suspense> |
|---|---|---|
| 用途 | 改变 DOM 挂载位置 | 异步加载时的占位 |
| 使用场景 | 弹窗、浮层等脱离父级布局的内容 | 异步组件、懒加载、SSR |
| 是否影响逻辑结构 | ❌（仅改变渲染位置） | ✅（控制渲染时机） |