必须传送到 body 是因为模态框嵌套在 overflow: hidden、transform 等父容器中会触发浏览器堆叠上下文限制，导致裁剪、定位偏移、z-index 失效；teleport 在虚拟 dom 层重定向渲染目标，不移动真实 dom，无重排开销，响应式与生命周期均正常。
直接用 <teleport to="body"></teleport> 把模态框内容“传送”到 下，就能避开父级样式干扰、z-index 层级限制和定位异常问题，这是 Vue 3 中最轻量又高效的渲染优化方式之一。
为什么必须传送到 body？
模态框这类全局交互组件，一旦嵌套在有 overflow: hidden、transform、filter 或低 z-index 的父容器里，就会出现被裁剪、定位偏移、层级压不住等问题。这些不是代码写错了，而是浏览器堆叠上下文和 CSS 渲染规则导致的天然限制。把模态框挂到 下，等于让它脱离所有中间容器的影响，获得最干净的定位环境。
基础写法：一行 Teleport 解决渲染位置
不需要额外逻辑或 DOM 操作，只需包裹模板内容：
- 在组件中用
<teleport to="body"></teleport>包住模态框结构 -
to值支持 CSS 选择器（如"body"、"#modal-root"）或直接传 DOM 元素 - 内部仍可正常使用响应式数据、
props、emit和插槽，逻辑完全不受影响
示例：
进阶建议：提升稳定性和复用性
真实项目中推荐这几项实践：
- 为
预留一个专用容器，比如<div id="modal-root"></div>，再用to="#modal-root"，避免多个 Teleport 冲突或影响其他脚本对body的操作 - 配合
disabled属性做条件控制，例如服务端渲染时临时禁用 Teleport，保持 SSR 一致性 - 模态框组件自身不管理显示状态，由父组件通过
props控制 +@update:visible同步，更符合 Composition API 的响应式设计习惯 - 若需多实例（如同时打开多个提示框），确保每个 Teleport 内容有唯一 key 或用 v-show 替代 v-if，避免 DOM 节点复用导致状态错乱
它不是“移动 DOM”，而是“重定向渲染”
Teleport 不会调用 appendChild 或触发浏览器重排，Vue 在虚拟 DOM 层就决定了最终挂载位置。这意味着：
- 没有运行时 DOM 操作开销
- 生命周期钩子（如
onMounted）仍按组件树顺序执行 - 响应式依赖、provide/inject、事件监听全部正常工作
本质上是编译期决定渲染目标，既轻量又可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
