解释 Vue 3 源码中 `Teleport` 组件在挂载和更新时如何将 `children` 移动到目标 DOM 节点。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

同学们，各位掘金的潜水员，大家好！今天咱们来聊聊Vue 3源码里一个挺有意思的组件——Teleport。这玩意儿就像个“空间传送门”，能把你的DOM元素“嗖”的一下传送到页面的其他地方。听起来是不是有点魔幻？

别急，今天咱们就来扒一扒Teleport的底裤，看看它在挂载和更新的时候，是怎么把children“乾坤大挪移”到目标DOM节点的。

Teleport：你的DOM传送带

首先，简单介绍一下Teleport是干啥的。想象一下，你有个弹窗组件，但你希望它渲染在<body>的最末尾，而不是被父组件的样式或者结构影响。这时候，Teleport就派上用场了。

它的基本用法是这样的：

<template>
  <div>
    <Teleport to="#app-modal">
      <div class="modal">
        <p>Hello from the modal!</p>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.modal {
  background-color: white;
  border: 1px solid black;
  padding: 20px;
}
</style>

在这个例子里，Teleport会把<div>包裹的modal元素传送到id为app-modal的DOM节点里。神奇吧？

Teleport的源码结构：骨骼要清晰

要理解Teleport的工作原理，咱们先来看看它的源码结构。Teleport组件在Vue 3的源码里，其实就是一个普通的组件，它的render函数返回一个Teleport类型的vnode。

// packages/runtime-core/src/components/Teleport.ts

import {
  Fragment,
  openBlock,
  createBlock,
  createCommentVNode,
  renderSlot,
  getCurrentRenderingContext,
  onBeforeUnmount,
  VNode,
  normalizeVNode,
  Text,
  Comment,
  createVNode,
  TeleportProps,
  resolveTransitionHooks,
  createRenderer,
  RootRenderFunction,
} from '@vue/runtime-core'

import {
  isString,
  isObject,
  isUndefined,
  isArray,
  remove,
  invokeArrayFns,
} from '@vue/shared'

export const TeleportImpl = {
  __isTeleport: true,
  process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, patchProps, moveTarget) {
    // ... 核心的挂载和更新逻辑
  },
  create: (__DEV__ ? processTeleport : processTeleport),
  move: moveTeleport,
  remove: removeTeleport,
  unmount: unmountTeleport,
} as ComponentOptions

const Teleport = TeleportImpl as any as {
  new (...args: any[]): {
    $props: TeleportProps
  }
}

export default Teleport

是不是看着有点眼花？别慌，咱们慢慢来。这里最关键的是TeleportImpl对象，它包含了process、create、move、remove、unmount这几个方法。这些方法定义了Teleport组件在不同生命周期阶段的行为。

其中，process函数是核心，它负责处理Teleport组件的挂载和更新。move函数负责移动Teleport的内容，remove函数负责移除Teleport的内容，unmount负责卸载Teleport组件。

挂载：初来乍到，安家落户

当Teleport组件第一次被渲染时，会调用process函数进行挂载。挂载的过程主要包括以下几个步骤：

获取目标容器： 首先，Teleport会根据to属性的值，找到目标DOM节点。to属性可以是一个CSS选择器字符串，也可以是一个DOM元素。如果找不到目标节点，Vue 3会抛出一个警告。
```
// 获取目标容器
let target = isString(props.to)
  ? document.querySelector(props.to)
  : props.to
```

创建占位符： 为了方便后续的更新和移动，Teleport会在原始位置创建一个占位符。这个占位符是一个空的Comment节点。

// 创建占位符
const placeholder = (n2.el = createCommentVNode('teleport start'))
const mainAnchor = (n2.anchor = createCommentVNode('teleport end'))

hostInsert(placeholder, container, anchor)
hostInsert(mainAnchor, container, anchor)

挂载子节点： 接下来，Teleport会递归地挂载它的子节点。这里需要注意的是，子节点会被挂载到目标容器中，而不是原始的容器中。

// 挂载子节点到目标容器
const { shapeFlag, children } = n2
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
  mountChildren(
    children as VNode[],
    target, // 目标容器
    null,
    parentComponent,
    parentSuspense,
    isSVG,
    optimized
  )
}

mountChildren函数会遍历子节点，并调用patch函数来挂载每个子节点。

处理disabled属性： Teleport有一个disabled属性，用于控制是否启用传送功能。如果disabled属性为true，那么子节点会被挂载到原始容器中，而不是目标容器中。
```
// 处理 disabled 属性
if (props.disabled) {
  // ...
} else {
  // ...
}
```

用表格来总结一下挂载过程：

步骤	描述	代码示例
1. 获取目标容器	根据`to`属性的值，找到目标DOM节点。	`let target = isString(props.to) ? document.querySelector(props.to) : props.to`
2. 创建占位符	在原始位置创建一个占位符，用于标记`Teleport`组件的起始和结束位置。	`const placeholder = (n2.el = createCommentVNode('teleport start'))` `const mainAnchor = (n2.anchor = createCommentVNode('teleport end'))` `hostInsert(placeholder, container, anchor)` `hostInsert(mainAnchor, container, anchor)`
3. 挂载子节点	递归地挂载`Teleport`的子节点到目标容器中。	`const { shapeFlag, children } = n2` `if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {` `mountChildren(` `children as VNode[],` `target, // 目标容器` `null,` `parentComponent,` `parentSuspense,` `isSVG,` `optimized` `)` `}`
4. 处理`disabled`属性	如果`disabled`属性为`true`，那么子节点会被挂载到原始容器中，而不是目标容器中。	`if (props.disabled) {` `// ...` `} else {` `// ...` `}`

更新：旧貌换新颜，位置也可能变

当Teleport组件的props发生变化时，会触发更新。更新的过程比挂载稍微复杂一些，因为它需要考虑以下几种情况：

to属性改变： 如果to属性发生了变化，那么Teleport需要把子节点从旧的目标容器移动到新的目标容器中。

// to 属性改变
if (to !== prevTo) {
  const nextTarget = isString(to) ? document.querySelector(to) : to
  if (nextTarget) {
    // 移动子节点到新的目标容器
    moveTeleport(n2, parentComponent, parentSuspense, MoveType.TARGET_CHANGE)
  } else {
    __DEV__ && warn('Invalid Teleport target on update:', to)
  }
}

moveTeleport函数负责把子节点从旧的目标容器移动到新的目标容器中。

disabled属性改变： 如果disabled属性发生了变化，那么Teleport需要根据新的disabled值，把子节点移动到原始容器或者目标容器中。
```
// disabled 属性改变
if (disabled !== prevDisabled) {
  moveTeleport(n2, parentComponent, parentSuspense, MoveType.TARGET_CHANGE)
}
```

子节点发生变化： 如果Teleport的子节点发生了变化，那么Vue 3会使用diff算法来更新子节点。

// 子节点发生变化
patchChildren(
  n1,
  n2,
  target,
  anchor,
  parentComponent,
  parentSuspense,
  isSVG,
  optimized
)

用表格来总结一下更新过程：

步骤	描述	代码示例
1. `to`属性改变	如果`to`属性发生了变化，那么`Teleport`需要把子节点从旧的目标容器移动到新的目标容器中。	`if (to !== prevTo) {` `const nextTarget = isString(to) ? document.querySelector(to) : to` `if (nextTarget) {` `moveTeleport(n2, parentComponent, parentSuspense, MoveType.TARGET_CHANGE)` `} else {` `__DEV__ && warn('Invalid Teleport target on update:', to)` `}` `}`
2. `disabled`属性改变	如果`disabled`属性发生了变化，那么`Teleport`需要根据新的`disabled`值，把子节点移动到原始容器或者目标容器中。	`if (disabled !== prevDisabled) {` `moveTeleport(n2, parentComponent, parentSuspense, MoveType.TARGET_CHANGE)` `}`
3. 子节点发生变化	如果`Teleport`的子节点发生了变化，那么Vue 3会使用diff算法来更新子节点。	`patchChildren(` `n1,` `n2,` `target,` `anchor,` `parentComponent,` `parentSuspense,` `isSVG,` `optimized` `)`

Move: 乾坤大挪移的奥秘

moveTeleport函数是Teleport组件的核心函数之一，它负责把子节点从一个容器移动到另一个容器。这个函数的实现思路其实很简单：

找到起始和结束占位符： 首先，moveTeleport会找到Teleport组件的起始和结束占位符。这些占位符是在挂载阶段创建的。
```
// 找到起始和结束占位符
const { el, anchor } = n2
```
移动子节点： 接下来，moveTeleport会遍历起始和结束占位符之间的所有节点，并把它们移动到新的容器中。
```
// 移动子节点
let next = el
while (next) {
  hostInsert(next, target, anchor)
  next = next.nextSibling
  if (next === anchor) {
    next = null
  }
}
```
这里需要注意的是，moveTeleport会使用hostInsert函数来移动节点。hostInsert函数是一个平台相关的函数，它负责把节点插入到DOM树中。

移除和卸载：挥一挥衣袖，不带走一片云彩

当Teleport组件被移除或者卸载时，会调用removeTeleport和unmountTeleport函数。这两个函数负责清理Teleport组件留下的痕迹。

removeTeleport函数负责把Teleport组件的子节点从目标容器中移除。

function removeTeleport(vnode: VNode, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, doRemove: boolean) {
  // ...
  const { shapeFlag, children } = vnode
  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    unmountChildren(children as VNode[], parentComponent, parentSuspense, doRemove)
  }

  // 移除起始和结束占位符
  hostRemove(vnode.el!)
  hostRemove(vnode.anchor!)
  // ...
}

unmountTeleport函数负责卸载Teleport组件本身。

const unmountTeleport: UnmountComponentFn = ({ shapeFlag, children }, parentComponent, parentSuspense, doRemove) => {
  if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    unmountChildren(children as VNode[], parentComponent, parentSuspense, doRemove)
  }
}

这两个函数的逻辑都比较简单，这里就不再赘述了。

总结：Teleport的传送秘籍

好了，同学们，今天咱们就聊到这里。通过今天的讲解，相信大家对Teleport组件的实现原理有了一个更深入的了解。总的来说，Teleport组件的实现思路并不复杂，它主要利用了以下几个技术：

占位符： 使用占位符来标记Teleport组件的起始和结束位置。
DOM操作： 使用hostInsert函数来移动DOM节点。
Diff算法： 使用diff算法来更新子节点。

掌握了这些技术，你也可以自己实现一个类似的组件。

最后，用一句话来总结Teleport组件的传送秘籍：“乾坤大挪移，移形换位，不在乎天长地久，只在乎曾经拥有！”

希望今天的讲座对大家有所帮助，谢谢大家！下次有机会再见!

补充说明：关于hostInsert

刚才提到了 hostInsert，这个函数是平台相关的，什么意思呢？Vue 3 可以在不同的平台上运行，比如浏览器、Node.js等等。不同的平台有不同的DOM操作API。hostInsert 的作用就是封装了这些平台相关的DOM操作API，让 Vue 3 的核心代码可以不用关心具体的平台细节。

在浏览器环境下，hostInsert 实际上就是调用 insertBefore 这个API。

// packages/runtime-dom/src/nodeOps.ts

function insert(child: Node, parent: Node, anchor: Nullable<Node>) {
  parent.insertBefore(child, anchor || null)
}

export const nodeOps = {
  insert,
  // ... 其他DOM操作
}

nodeOps 是一个对象，包含了各种DOM操作的函数。Vue 3 通过 createRenderer 函数来创建一个渲染器，并且把 nodeOps 传递给渲染器。这样，渲染器就可以使用 nodeOps 提供的DOM操作函数来操作DOM了。

// packages/runtime-core/src/renderer.ts

export function createRenderer(options: RendererOptions = {}): Renderer {
  const {
    insert: hostInsert,
    // ... 其他DOM操作
  } = options

  function render(vnode: VNode | null, container: RendererElement, isSVG: boolean) {
    // ...
  }

  return {
    render,
    // ...
  }
}

再补充一点：关于MoveType

在 moveTeleport 函数里，我们看到了 MoveType.TARGET_CHANGE 这个参数。MoveType 是一个枚举类型，用于表示移动的类型。它有以下几个取值：

MoveType.NORMAL: 普通的移动，比如在同一个容器内移动节点。
MoveType.REORDER: 重新排序，比如在使用 v-for 时，改变了列表的顺序。
MoveType.TARGET_CHANGE: 目标容器发生了变化，比如 Teleport 组件的 to 属性发生了变化。

moveTeleport 函数会根据 MoveType 的值来执行不同的移动操作。在 MoveType.TARGET_CHANGE 的情况下，moveTeleport 会把子节点从旧的目标容器移动到新的目标容器中。

发表回复 取消回复

发表回复取消回复