发布于 由admin

解释 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函数进行挂载。挂载的过程主要包括以下几个步骤：

  1. 获取目标容器： 首先，Teleport会根据to属性的值，找到目标DOM节点。to属性可以是一个CSS选择器字符串，也可以是一个DOM元素。如果找不到目标节点，Vue 3会抛出一个警告。

    // 获取目标容器
let target = isString(props.to)
  ? document.querySelector(props.to)
  : props.to

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

    // 创建占位符
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
  )
}

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

  4. 处理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发生变化时，会触发更新。更新的过程比挂载稍微复杂一些，因为它需要考虑以下几种情况：

  1. 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函数负责把子节点从旧的目标容器移动到新的目标容器中。

  2. disabled属性改变： 如果disabled属性发生了变化，那么Teleport需要根据新的disabled值，把子节点移动到原始容器或者目标容器中。

    // 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
)

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

步骤 描述 代码示例
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组件的核心函数之一，它负责把子节点从一个容器移动到另一个容器。这个函数的实现思路其实很简单：

  1. 找到起始和结束占位符： 首先，moveTeleport会找到Teleport组件的起始和结束占位符。这些占位符是在挂载阶段创建的。

    // 找到起始和结束占位符
const { el, anchor } = n2

  2. 移动子节点： 接下来，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 会把子节点从旧的目标容器移动到新的目标容器中。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注