做后台管理系统的同学一定遇到过这个问题：写了一个弹窗，结果被父级容器的 overflow: hidden 或者 transform: scale() 给整变形了。还有做多步骤表单的时候，用户填到第三步，一不小心点走了标签页，回来发现填的东西全没了。这两个坑，Vue3 的 Teleport 和 KeepAlive 就是来填的。
Teleport：让组件“穿墙”出去
Teleport 这个词就是“瞬间移动”的意思。Vue3 用它解决一个很实际的问题：让组件的 DOM 节点可以渲染到任意位置，但组件的逻辑关系保持不变。
举个例子。你的业务组件 A 嵌套在一个三层深的容器里，这个容器带了 overflow: hidden。你想让 A 里面的弹窗直接挂在 body 下面。以前你得用一些复杂手段，或者把弹窗的状态提到最顶层。现在用 Teleport，一行代码就搞定。
基本写法
<!-- 传送到 body -->
<Teleport to="body">
<Modal :visible="showModal" />
</Teleport>
<!-- 传送到指定容器，disabled 可以动态开关 -->
<Teleport to="#overlay-container" :disabled="!isMobile">
<Tooltip />
</Teleport>Teleport 接受两个参数：to 指定要去哪里（填 CSS 选择器或者 body 关键字），disabled 控制要不要传送。
底层原理
Vue3 的组件实例和 DOM 节点是分开的。Teleport 做的事很简单：在渲染的时候，把子节点的 DOM 操作改到目标容器上。Vue 的响应式系统完全不受影响。你可以在 Teleport 里面正常用 provide/inject，父组件也能通过 ref 拿到子组件实例。
需要注意的地方
Teleport 的目标元素必须在它渲染之前就已经存在。如果目标是动态创建的，要用 nextTick 等它创建好了再渲染。
KeepAlive：让组件“活”下来
如果说 Teleport 是空间上的传送，那 KeepAlive 就是时间上的保存。它让组件在切换后不被销毁，而是缓存起来，下次切回来直接唤醒。
这个在 Tab 切换、路由缓存、多步骤表单里特别好用。用户填了五分钟的表单，因为手滑切到别的页面就全丢了，这种事太让人崩溃了。
生命周期变化
普通组件切换时，会走 unmounted 然后 mounted，状态全丢。被 KeepAlive 包住后，切换时走的是 deactivated 和 activated，组件实例和 DOM 都被缓存，状态还在。
import { onActivated, onDeactivated, ref } from 'vue'
const formData = ref({
username: '',
step: 1
});
onActivated(() => {
console.log('组件复活了，状态还在：', formData.value);
});
onDeactivated(() => {
console.log('组件被缓存了');
});控制缓存：include、exclude、max
KeepAlive 给了三个参数来控制缓存：
<KeepAlive
:include="['UserForm', 'UserProfile']"
:exclude="['Detail']"
:max="10"
>
<component :is="currentComponent" />
</KeepAlive>include 是只缓存谁，exclude 是不缓存谁，max 是最多缓存多少个。max 这个参数很实用，可以防止缓存太多导致内存占用过高。
注意命名
用 include 和 exclude 的时候，组件必须有 name。在 Vue3.3+ 里用 defineOptions 来声明：
defineOptions({ name: 'UserForm' });两个一起用：全局弹窗系统
单独用其中一个已经很好了，两个组合起来才是真的大招。常见场景是全局弹窗系统：
弹窗内容需要 Teleport 到 body，不被父级样式影响
弹窗的状态需要 KeepAlive 缓存，切换路由不丢失
用户填了一半的表单，关掉再打开，数据还在
<Teleport to="body">
<KeepAlive>
<template v-for="modal in modals" :key="modal.id">
<component
:is="modal.component"
v-if="modal.visible"
:visible="modal.visible"
/>
</template>
</KeepAlive>
</Teleport>实际用法：多步骤表单加全局确认框
路由级缓存
<!-- App.vue -->
<KeepAlive :include="['OrderConfirm', 'AddressEdit', 'PaymentSelect']">
<RouterView />
</KeepAlive>几个建议
不是所有页面都要缓存。列表页、详情页一般不需要，按需来就行
在 onDeactivated 里清理定时器和事件监听，避免内存泄漏
Teleport 的目标尽量用一个固定的容器，不要动态创建
常见问题
Teleport 里的组件还能用父组件的 provide 吗？
能。Teleport 只改 DOM 位置，不改组件逻辑树。依赖注入、事件传递、ref 获取都不受影响。
KeepAlive 缓存的组件会释放内存吗？
不主动释放。但设了 max 之后，最久没用过的实例会被销毁，释放内存。
include 和 exclude 支持动态更新吗？
支持。它们是响应式的，可以根据用户操作动态调整。
总结
Teleport 打破 DOM 层级限制，让组件渲染到任意位置，逻辑关系不变。KeepAlive 让组件切换时不销毁，状态保留。两个一起用，全局弹窗、表单缓存、多 Tab 应用都能处理得很干净。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！