Teleport、KeepAlive 分别解决什么？
先理解原理和示例，再练习完整口述与追问。
回答要点
Teleport 调整实际 DOM 挂载位置，保留逻辑组件关系；KeepAlive 缓存组件实例。弹窗挂到 body 后，布局、样式、焦点和滚动锁定仍需处理；缓存页面的订阅也不会凭空失效。
原理拆解
Teleport 改变实际 DOM 挂载位置，适合弹窗、浮层避开祖先裁切或层叠约束；组件逻辑父子关系与数据流仍保持。KeepAlive 保存组件实例以复用状态，控制的是生命周期与缓存，而非把 DOM 任意传送。二者可以一起用，但解决的是不同问题。
示例与推演
对编辑弹窗，Teleport 到页面预先存在的 overlay 容器，避免卡在 overflow:hidden 的面板里；打开关闭仍需焦点圈定、Esc、滚动锁定与焦点恢复。对列表页，KeepAlive 可保存筛选与滚动，但账号切换或数据失效时应主动重置。SSR 还需确保 Teleport 目标与输出匹配。
易错点
Teleport 不会自动解决所有 z-index 和可访问性问题。KeepAlive 也不会让请求停止，缓存页失活后的定时器和订阅需要自己管理。
参考回答可直接练习口述
Teleport 把实际 DOM 渲染到其他容器，但组件在逻辑树中的父子、注入和状态关系保持不变，常用于弹窗。KeepAlive 则保留组件实例，使其激活和失活而不立即销毁。它们分别改变挂载位置和实例生命周期，都不会自动处理弹窗焦点、页面滚动、样式或后台订阅。
面试官可能继续问追问与完整解答展开收起
追问
Teleport 后事件和 inject 关系变了吗？关闭弹窗和卸载弹窗对状态保留有什么差异？
追问回答
Teleport 后 Vue 组件层的注入和父子关系不变，原生 DOM 事件传播仍受实际 DOM 路径影响。仅把弹窗隐藏通常保留本地状态和副作用；卸载会销毁实例并触发清理。需要保留草稿还是每次重置，应由业务明确决定。