Teleport与KeepAlive的协同作战：解决弹窗缓存与状态恢复难题

组合Teleport和KeepAlive实现跨组件树的状态保持弹窗，解决路由切换后弹窗内容丢失、滚动位置重置等棘手问题。 · 难度：入门 · +10XP

Teleport + KeepAlive 组合模式

当弹窗组件被KeepAlive包裹并配合Teleport使用时，会出现缓存失效或状态丢失的问题。本教程通过分析Vue的虚拟DOM挂载机制，展示如何将KeepAlive的缓存范围正确作用于Teleport传送的目标。实现一个模态框系统：路由切换时弹窗保持打开状态，内部表单数据不丢失，且遮罩层正确管理焦点。

// ModalContainer.vue
<template>
  <KeepAlive>
    <component :is="activeModal" v-if="activeModal" />
  </KeepAlive>
  <Teleport to="body">
    <div v-if="activeModal" class="overlay" @click="close"></div>
  </Teleport>
</template>
<script setup>
import { ref, provide } from 'vue'
const activeModal = ref(null)
const close = () => { activeModal.value = null }
provide('modal', { open: (comp) => activeModal.value = comp, close })
</script>