---

前言

Teleport 是 Vue 3 的一个内置组件，它允许你将组件的内容渲染到 DOM 树的其他位置，而不是其父组件的 DOM 层次结构中。下面是对 Teleport 实现源码的详细分析。

源码分析

我们可以在 Vue 3 的源码中找到 Teleport 的实现，主要在 runtime-core 包中。以下是 Teleport 组件的主要部分（完整代码 Teleport.ts）：

1. Teleport 组件定义

在 runtime-core/src/components/Teleport.ts 中定义了 Teleport 组件：

import {RendererElement,RendererNode,RendererInternals,TransformVNodeArgs,VNode,TeleportProps
} from '../renderer';
import { isFunction, isArray, isString } from '@vue/shared';// TeleportComponent
export const TeleportImpl = {__isTeleport: true,process(n1: VNode | null,n2: VNode,container: RendererElement,anchor: RendererNode | null,internals: RendererInternals,optimized: boolean) {// 处理逻辑},remove(vnode: VNode, internals: RendererInternals) {// 移除逻辑},move(vnode: VNode, container: RendererElement, anchor: RendererNode | null, internals: RendererInternals) {// 移动逻辑},hydrate: null // SSR 相关逻辑
};

2. process 方法

process 方法是 Teleport 的核心，用于处理 VNode 的挂载、更新和卸载逻辑：

process(n1: VNode | null,n2: VNode,container: RendererElement,anchor: RendererNode | null,internals: RendererInternals,optimized: boolean
) {const { mc: mountChildren, pc: patchChildren, pbc: patchBlockChildren, o: { insert, querySelector, createText } } = internals;const target = n2.props && n2.props.to;if (n1 == null) {// 初始化逻辑if (target != null) {const targetNode = isString(target) ? querySelector(target) : target;if (targetNode) {mountChildren(n2.children, targetNode, anchor, internals, optimized);}}} else {// 更新逻辑if (target !== (n1.props && n1.props.to)) {// 目标位置变化时的处理}patchChildren(n1, n2, container, anchor, internals, optimized);}
}

3. 挂载逻辑

在 process 方法中，如果 n1 为 null，表示这是第一次挂载组件。此时 Teleport 会将其子组件挂载到指定的目标容器中：

if (n1 == null) {// 初始化逻辑if (target != null) {const targetNode = isString(target) ? querySelector(target) : target;if (targetNode) {mountChildren(n2.children, targetNode, anchor, internals, optimized);}}
}

4. 更新逻辑

如果 n1 不为 null，则表示这是一次更新。Teleport 会检查目标位置是否发生变化，并根据需要移动子组件：

if (target !== (n1.props && n1.props.to)) {// 目标位置变化时的处理
}
patchChildren(n1, n2, container, anchor, internals, optimized);

5. 移除和移动逻辑

remove 和 move 方法分别处理组件从目标位置移除和在目标位置之间移动的逻辑：

remove(vnode: VNode, internals: RendererInternals) {// 移除逻辑
},
move(vnode: VNode, container: RendererElement, anchor: RendererNode | null, internals: RendererInternals) {// 移动逻辑
}

总结

Teleport 通过其 process 方法处理挂载、更新和移除逻辑，确保子组件可以正确地在指定的目标位置渲染和更新。其核心机制包括：

• 挂载时查找目标位置并将子组件插入其中。
• 更新时检查目标位置变化并根据需要移动子组件。
• 处理子组件的移除和移动。

Teleport 的实现充分利用了 Vue 的虚拟 DOM 和渲染机制，使其能够灵活地控制组件的渲染位置，满足复杂的 UI 需求。

参考资料

• Vue.js Teleport Documentation
• Vue.js GitHub Repository