摘要
Vue3 引入了 Teleport 和 Fragment，分别解决了跨层级渲染和多个根节点的问题，使组件开发更灵活。
# 一、Teleport——跨层级渲染
在 Vue2 中，组件内容只能渲染到自身 template 作用范围内，而 Vue3 提供的 Teleport，允许将组件内容渲染到任意 DOM 节点。
# 示例：将模态框渲染到 body
<template>
<teleport to="body">
<div class="modal">这是一个模态框</div>
</teleport>
</template>
应用场景：
- 让弹窗、悬浮菜单不受父级
overflow: hidden限制。 - 避免嵌套层级过深，影响
z-index管理。
# 二、Fragment——多个根节点支持
Vue2 组件必须有一个唯一的根节点，而 Vue3 支持多个根节点，避免了不必要的 div 嵌套。
# 示例：无多余的包裹 div
<template>
<h1>标题</h1>
<p>这是一个段落</p>
</template>
应用场景：
- 组件需要返回多个元素，避免
div嵌套导致的 CSS 影响。 - 更符合 HTML 语义化结构。
# 结论
Teleport 解决了组件的跨层级渲染问题，而 Fragment 提供了更灵活的模板结构，二者都提升了 Vue3 的开发体验。
这两篇文章分别介绍了 Vue3 的组合式 API 和新特性 Teleport、Fragment，如果你有其他 Vue3 相关的主题需求，可以告诉我，我再补充！