Teleport通过将模态框内容渲染到body等外部DOM节点，使其脱离父容器子树，从而规避overflow:hidden、transform、clip-path等样式裁剪与定位干扰，同时保持对父组件逻辑的完整访问。
Vue 的 Teleport 直接把模态框内容“挪”出父级 DOM 节点，让它不再受父容器的 overflow: hidden、transform 或 clip-path 等样式约束——因为这些 CSS 属性只对自身及其后代生效，而 Teleport 渲染后的内容已不在父元素的 DOM 子树中。
为什么父级 overflow: hidden 会裁剪模态框？
当模态框作为子元素嵌套在某个设置了 overflow: hidden 的容器内时，浏览器会严格按该容器的边界裁剪所有后代元素（包括 position: fixed 的弹层），这是 CSS 层叠上下文和渲染规则决定的。即使你给模态框设了 z-index: 9999 或 fixed 定位，只要它还在那个容器内部，就会被裁掉。
Teleport 如何绕过这个限制？
- 用
<teleport to="body"></teleport>把模态框模板内容直接插入到底部，脱离原父容器的 DOM 树结构 - 此时模态框的定位基准变成视口（
fixed）或body（absolute），不再继承父容器的溢出裁剪规则 - 它仍能正常访问父组件的 props、事件、响应式数据——逻辑没变，只是 DOM 位置变了
实际写法示例
不加 Teleport（会被裁剪）：
<div class="card" style="overflow: hidden;"> <button @click="show = true">打开弹窗</button> <div v-if="show" class="modal">...</div> </div>
加 Teleport（安全显示）：
立即学习“前端免费学习笔记（深入）”；
<div class="card" style="overflow: hidden;">
<button @click="show = true">打开弹窗</button>
<Teleport to="body">
<div v-if="show" class="modal">...</div>
</Teleport>
</div>
其他常见干扰样式也一并规避
除了 overflow: hidden，以下父级样式同样会让传统模态框失效，而 Teleport 同样有效：
-
transform、perspective、filter：会创建新的包含块，导致fixed定位相对该块而非视口 —— Teleport 后内容在body下，定位基准回归视口 -
z-index层级战争：父容器 z-index 低，子元素再高也没用 —— Teleport 后模态框直接挂载在body，可自由设置全局层级 -
clip-path或mask：仅作用于自身子树 —— Teleport 移出后完全不受影响
