第 29 题：Vue3 的 Teleport 原理（跨层级 DOM 挂载技术）

第 28 题：Vue3 的 Teleport 原理（跨层级 DOM 挂载技术）

🎯 一、核心回答（面试官最想听）

<Teleport> 是 Vue3 提供的一个内置组件，用来把组件的 DOM 渲染到指定容器（任意 DOM 节点） ，而不受组件层级限制。

它的原理是：

虚拟 DOM 仍然属于原父组件
但渲染 DOM 时，patch 阶段把真实 DOM 插入到指定的 target 节点
Vue 通过 "分离 vnode 树和 DOM 树" 来实现渲染脱离父级组件结构。

也就是说：

VNode 结构不改变
DOM 挂载位置改变

🎯 二、深度原理（面试官会觉得你专业）

1️⃣ Teleport 是如何工作的？

Vue3 中 Teleport 的渲染器提供了两个流程：

1. 生成 VNode：仍在原来的组件树内

Teleport 的 children 仍然是父组件的一部分：

css 复制代码

const vnode = h(
  Teleport,
  { to: '#modal' },
  [h('div', 'content')]
)

VNode 树保持原结构。

2. 在 patch 阶段：DOM 挂载到指定 target

流程：

dart 复制代码

parent vnode   --虚拟关系--> teleport vnode
        │
        ▼
真实 DOM 不挂在 parent 下，而是挂在 document.querySelector('#modal')

Vue 内部使用：

scss 复制代码

hostInsert(child, target)

而不是默认插入父节点。

所以 Teleport 改变的是 DOM 插入位置，而不是组件层级关系。

2️⃣ Teleport 的核心渲染逻辑（伪代码）

scss 复制代码

// 简化版伪代码
if (n1 === null) {
  // 初次渲染
  mountChildren(n2.children, targetContainer)
} else {
  // 更新
  patchChildren(n1.children, n2.children, targetContainer)
}

关键点：

targetContainer ★ 是 Teleport 的 to 属性指定的 DOM
children 永远在 targetContainer 下渲染

3️⃣ DOM 树与组件树分离（关键）

组件树（逻辑结构）

css 复制代码

App
 └─ Dialog
     └─ Teleport
         └─ content

DOM 树（真实结构）

xml 复制代码

<body>
  <div id="app"></div>
  <div id="modal">
      content  ← Teleport 渲染在这里
  </div>
</body>

组件依赖、状态依然在原位置，但渲染位置被改变。

4️⃣ Teleport 动态 target 切换

Vue3 允许：

ini 复制代码

<Teleport :to="isBigScreen ? 'body' : '#panel'">

切换 target 后：

Vue 会把原来的 DOM 从旧 target 拿出来
append 到新的 target
不重建组件实例，不触发 unmount

🎯 三、Teleport 使用示例

1）常见场景：弹窗、消息提示

ini 复制代码

<Teleport to="body">
  <div class="modal">I am modal</div>
</Teleport>

2）多个内容同时 Teleport

xml 复制代码

<Teleport to="#sidebar">
  <Menu />
</Teleport>

<Teleport to="#modal">
  <Dialog />
</Teleport>

3）动态切换 Teleport 目标

xml 复制代码

<Teleport :to="target">
  <div>Content</div>
</Teleport>

<script setup>
const target = ref('#container1')
// 动态切换
setTimeout(() => target.value = '#container2', 2000)
</script>

Vue 会自动移动真实 DOM。

🎯 四、面试官追问 + 高分回答

❓1：Teleport 为什么不会破坏组件的响应式？

高分回答：

因为 Teleport 只改变 DOM 渲染位置，不改变组件实例所属位置。

reactive、computed、watch 都在原组件树执行
setup 作用域不变
props、emit 不变

只有 DOM 挂载点被改变，逻辑完全不受影响。

❓2：Teleport 与 Portal 的区别是什么？（React）

（这是高分题）

Vue Teleport == React Portal。

区别：

Vue Teleport 深度整合模板编译 + 响应式系统
React Portal 只是"DOM 挂载位置改变"，没有响应式集成

❓3：Teleport 会导致事件冒泡混乱吗？

不会。

即使 DOM 被移动：

事件冒泡仍沿着组件树冒泡，而非 DOM 树
Vue 用 synthetic events 系统统一处理事件

❓4：Teleport 会造成内存泄漏吗？

只要：

有 key
正常 unmount

不会泄漏。

Vue 会在 unmount 时：

调用 unmountChildren()
移除 DOM
断开 effect

❓5：Teleport 适合用在什么场景？

高频：

modal 弹窗
tooltip
popover
loading
dropdown 下拉框
context menu
sidebar drawer

凡是希望 DOM 不受父节点 overflow/定位影响的 UI，都适合 Teleport。

🎯 五、高分总结（背下来面试必过）

Teleport 本质是基于 renderer 的 DOM 插入能力扩展，通过在 vnode 渲染阶段将真实 DOM 元素挂载到指定的 target DOM 中，实现组件树与 DOM 树分离 。

响应式依旧在原组件树生效，只有 DOM 结构发生改变，因此可以用于弹窗、下拉、提示、全局挂载类 UI 的渲染，是 Vue3 UI 体系的重要基础。