Vue 3源码深度解析之：`Vue`的`teleport`组件：它的渲染与更新机制。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，今天咱们来聊聊Vue 3里那个神出鬼没的teleport组件。它就像个传送门，能把你的DOM节点嗖的一下，传送到DOM树的另一个地方，简直是居家旅行、页面布局必备良药。

开场白：DOM的羁绊与teleport的自由

想象一下，你的页面结构就像一棵大树，每个组件都是树上的一个节点。正常情况下，组件们都安分守己地待在自己的位置，彼此之间有着父子、兄弟的血缘关系。但是，总有些不安分的家伙，比如弹窗、提示框，它们逻辑上属于某个组件，但视觉上最好独立于组件的层级结构，直接挂载到body下，避免被父组件的overflow: hidden之类的CSS属性影响。

这时候，teleport就派上用场了。它打破了DOM的血缘关系，让你的组件自由地飞翔（到目标位置）。

teleport的基本用法

先来个最简单的例子：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <h2>弹窗内容</h2>
        <p>这里是一些重要信息。</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showModal = ref(false);
    return {
      showModal,
    };
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000; /* 确保弹窗在最上层 */
}
</style>

在这个例子里，teleport的to属性指定了目标容器，这里是body。当showModal为true时，弹窗的内容会被渲染到body下，而不是teleport组件所在的位置。

teleport的渲染机制

Vue 3里，teleport的渲染过程大致是这样的：

编译阶段：Vue编译器会将teleport组件编译成一个特殊的VNode。这个VNode会记录teleport组件的to属性（目标容器的选择器）。
挂载阶段：在组件挂载时，teleport会找到to属性指定的目标容器。如果目标容器不存在，Vue会创建一个新的DOM元素。然后，teleport会将其子节点的VNode渲染成真实的DOM节点，并将这些DOM节点移动到目标容器中。
更新阶段：当teleport的子节点发生变化时，Vue会比较新旧VNode，然后更新目标容器中的DOM节点。

teleport的更新机制

teleport的更新机制其实就是标准的Vue组件更新流程，只不过多了一步：DOM节点的移动。

当teleport的子节点需要更新时，Vue会：

Diffing：比较新旧VNode，找出需要更新的节点。
Patching：根据Diff的结果，更新目标容器中的DOM节点。
移动：如果teleport的to属性发生了变化，或者teleport自身被移动到DOM树的另一个位置，那么Vue会将teleport的子节点从旧的目标容器移动到新的目标容器。

源码剖析：teleport的核心逻辑

要深入理解teleport，我们需要扒一扒Vue 3的源码。teleport的实现主要集中在packages/runtime-core/src/components/Teleport.ts这个文件里。

咱们先来看看Teleport.ts里定义的Teleport组件：

// packages/runtime-core/src/components/Teleport.ts
import {
  defineComponent,
  h,
  ref,
  watchEffect,
  onUnmounted,
  getCurrentScope,
  onScopeDispose,
  computed,
  VNode,
  RendererNode,
  RendererElement,
  ComponentInternalInstance,
  moveVNode,
  unmount,
  createCommentVNode,
  Comment,
  TeleportProps,
  resolveTransitionHooks,
  invokeArrayFns
} from '@vue/runtime-core'
import { isString, isObject, isArray, isFunction } from '@vue/shared'

export const Teleport = defineComponent({
  __name: 'Teleport',
  props: {
    to: {
      type: [String, Object],
      required: true
    },
    disabled: Boolean,
    persisted: Boolean
  },
  setup(props, { slots }) {
    const target = ref<RendererElement | null>(null)
    const targetAnchor = ref<RendererNode | null>(null)

    const instance = getCurrentInstance()!
    const { appContext, provides } = instance
    const move = (
      vnode: VNode,
      container: RendererElement,
      anchor: RendererNode | null,
      type: MoveType = MoveType.NORMAL
    ) => {
      moveVNode(vnode, container, anchor, type, parentSuspense)
    }
    let disabled = computed(() => props.disabled || !target.value)

    let parentSuspense: any = null
    if (__FEATURE_SUSPENSE__) {
      parentSuspense = instance.suspense
    }

    let currentContainer: RendererElement | null = null
    watchEffect(() => {
      let nextTarget: RendererElement | null = null
      const to = props.to
      if (isString(to)) {
        nextTarget = document.querySelector(to) as RendererElement
        if (__DEV__ && !nextTarget) {
          warn(`Invalid Teleport target on mount: "${to}" not found.`)
        }
      } else if (to && (to as any).nodeType) {
        nextTarget = to as RendererElement
      } else {
        if (__DEV__) {
          warn(
            `Invalid Teleport target on mount: target is ${to}.` +
              `It must be either a query selector string or an actual element.`
          )
        }
      }

      if (nextTarget) {
        target.value = nextTarget
        if (currentContainer) {
          //已经挂载过，移动内容
          const { el, anchor } = getTeleportVNode(instance.subTree)
          move(instance.subTree, nextTarget, anchor, MoveType.REORDER)
        }
      }
    })
    onUnmounted(() => {
      //卸载时，移动节点
      if (!props.persisted && target.value) {
        const { el, anchor } = getTeleportVNode(instance.subTree)
        move(
          instance.subTree,
          el.parentNode!,
          anchor,
          MoveType.REORDER
        )
      }
    })

    return () => {
      if (!props.disabled && target.value) {
        const slotsDefault = slots.default ? slots.default() : []
        return slotsDefault
      } else {
        return createCommentVNode('teleport start')
      }
    }
  }
})

function getTeleportVNode(vnode: VNode): { el: RendererElement, anchor: RendererNode | null } {
  let el: RendererElement | null = null
  let anchor: RendererNode | null = null
  if (vnode.shapeFlag & 16) {
    // 这是一个组件，需要递归查找
    const block = (vnode.component?.subTree)
    if (block) {
      return getTeleportVNode(block)
    }
  } else {
    el = vnode.el as RendererElement
    anchor = vnode.anchor
  }
  return { el: el!, anchor }
}

简单解释一下：

props：定义了teleport组件的属性，包括to（目标容器的选择器）、disabled（是否禁用teleport）和persisted（卸载时是否保留内容）。
setup：teleport组件的核心逻辑都在这里。
- target：一个ref，用来存储目标容器的DOM元素。
- watchEffect：监听props.to的变化，当to发生变化时，会更新target.value，并将teleport的子节点移动到新的目标容器。
- onUnmounted：在组件卸载时，如果props.persisted为false，会将teleport的子节点移动回原来的位置。

重点代码解读

watchEffect

watchEffect(() => {
  let nextTarget: RendererElement | null = null
  const to = props.to
  if (isString(to)) {
    nextTarget = document.querySelector(to) as RendererElement
    if (__DEV__ && !nextTarget) {
      warn(`Invalid Teleport target on mount: "${to}" not found.`)
    }
  } else if (to && (to as any).nodeType) {
    nextTarget = to as RendererElement
  } else {
    if (__DEV__) {
      warn(
        `Invalid Teleport target on mount: target is ${to}.` +
          `It must be either a query selector string or an actual element.`
      )
    }
  }

  if (nextTarget) {
    target.value = nextTarget
    if (currentContainer) {
      //已经挂载过，移动内容
      const { el, anchor } = getTeleportVNode(instance.subTree)
      move(instance.subTree, nextTarget, anchor, MoveType.REORDER)
    }
  }
})

这段代码负责监听to属性的变化。如果to是一个字符串，它会尝试用document.querySelector找到对应的DOM元素。如果to是一个DOM元素，它会直接使用这个DOM元素。找到目标容器后，它会将teleport的子节点移动到目标容器中。

onUnmounted

onUnmounted(() => {
  //卸载时，移动节点
  if (!props.persisted && target.value) {
    const { el, anchor } = getTeleportVNode(instance.subTree)
    move(
      instance.subTree,
      el.parentNode!,
      anchor,
      MoveType.REORDER
    )
  }
})

这段代码在组件卸载时执行。如果persisted属性为false，它会将teleport的子节点移动回原来的位置。

getTeleportVNode

function getTeleportVNode(vnode: VNode): { el: RendererElement, anchor: RendererNode | null } {
  let el: RendererElement | null = null
  let anchor: RendererNode | null = null
  if (vnode.shapeFlag & 16) {
    // 这是一个组件，需要递归查找
    const block = (vnode.component?.subTree)
    if (block) {
      return getTeleportVNode(block)
    }
  } else {
    el = vnode.el as RendererElement
    anchor = vnode.anchor
  }
  return { el: el!, anchor }
}

这个函数用于获取teleport子树的第一个DOM元素和锚点。之所以要递归查找，是因为teleport的子节点可能是一个组件，而组件的根节点才是我们需要的DOM元素。

teleport的适用场景

弹窗/模态框：这是teleport最常见的应用场景。将弹窗的内容渲染到body下，可以避免被父组件的样式影响。
提示框/Tooltip：和弹窗类似，提示框也需要独立于组件的层级结构，避免被父组件的overflow: hidden之类的CSS属性影响。
Portal：有时候，我们需要将一部分内容渲染到DOM树的另一个位置，比如将一个组件渲染到页面的侧边栏。
在shadow DOM中使用：teleport可以让你把节点传送到 shadow DOM 之外。

teleport的注意事项

to属性必须是一个有效的选择器或DOM元素。如果to属性指定的元素不存在，Vue会发出警告。
teleport的子节点必须是唯一的根节点。这意味着你不能直接在teleport里放多个平级的元素，需要用一个容器元素包裹起来。
teleport可能会影响CSS作用域。因为teleport将节点移动到了DOM树的另一个位置，所以可能会导致CSS作用域发生变化。在使用scoped CSS时，需要特别注意。

teleport与Portal的区别

teleport本质上是Vue提供的一个组件，而Portal是一种设计模式。teleport实现了Portal模式，但Portal模式并不局限于teleport。你也可以用其他方式来实现Portal模式，比如手动操作DOM。

特性	`teleport`	`Portal`
实现方式	Vue组件	设计模式
功能	将DOM节点移动到DOM树的另一个位置	将内容渲染到DOM树的另一个位置
灵活性	受Vue API限制，功能相对固定	可以自定义实现，更灵活
使用场景	Vue项目中，需要将内容渲染到指定位置的场景	通用场景，不局限于Vue项目

总结

teleport是Vue 3中一个非常实用的组件，它可以让你打破DOM的血缘关系，将组件的内容渲染到DOM树的另一个位置。通过深入理解teleport的渲染和更新机制，你可以更好地利用它来构建复杂的页面布局。

希望今天的讲座对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复