Vue 3源码极客之：`Vue`的`teleport`：它在`Vue` `SSR`中的渲染与`hydration`。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位老铁，晚上好！欢迎来到今晚的Vue源码极客讲座。今天咱们聊点高级货——Vue 3 的 teleport 组件，以及它在服务端渲染 (SSR) 和客户端激活 (hydration) 中的骚操作。准备好了吗？ Let’s dive in!

开胃小菜：teleport 是个啥玩意儿？

简单来说，teleport 就是 Vue 提供的一种“空间传送”能力。它可以把组件的内容渲染到 DOM 树的另一个地方，而不用管组件本身在哪个位置。想象一下，你有个弹窗组件，你希望它渲染到 <body> 标签的末尾，而不是卡在当前组件的某个奇怪的位置，这时候 teleport 就派上大用场了。

基本用法长这样：

<template>
  <div>
    <button @click="showModal = true">打开弹窗</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <h1>我是弹窗</h1>
        <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: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个例子里，teleport 把 .modal 这个弹窗组件“传送”到了 body 标签里。这意味着，即使你的组件结构很复杂，弹窗也能保证在最顶层显示，避免被父元素的样式影响。

正餐：teleport 在 SSR 中的渲染

SSR 的核心思想是在服务器端把 Vue 组件渲染成 HTML 字符串，然后发送给浏览器。浏览器拿到 HTML 后，再进行客户端激活 (hydration)，把静态的 HTML 变成可交互的 Vue 组件。

teleport 在 SSR 中面临一个挑战：服务器端渲染的时候，teleport 要把内容渲染到哪里去？服务器端可没有浏览器，没有 body 标签！

Vue 的解决方案是：在服务器端渲染时，teleport 会把内容收集起来，放到一个特殊的地方，然后在客户端激活的时候，再把内容“传送”到目标位置。

具体来说，Vue 会维护一个 teleportBuffers 对象，用于存储 SSR 过程中遇到的 teleport 内容。

在 packages/server-renderer/src/render.ts 文件里，你可以找到相关的代码：

// render.ts
import { createBufferStream } from './bufferStream'

export async function renderToString(
  vnode: VNode,
  context: SSRContext = {}
): Promise<string> {

  // ... 一些初始化工作 ...

  const buffer = createBufferStream()
  renderNode(vnode, buffer, context)

  // ... 一些清理工作 ...
  return buffer.toString()
}

function renderNode(
  vnode: VNode,
  buffer: BufferStream,
  context: SSRContext
) {
  if (isTeleport(vnode)) {
    // 处理 Teleport 组件
    handleTeleport(vnode, buffer, context)
  } else {
    // 处理其他类型的组件
    // ...
  }
}

function handleTeleport(
  vnode: VNode,
  buffer: BufferStream,
  context: SSRContext
) {
  const { to, children } = vnode.props!
  const target = resolveTarget(to, context) // 解决 to 属性
  const teleportContent = renderToString(children, context)

  // 如果目标元素不存在，将内容缓存到 teleportBuffers 中
  if (!target) {
    if (!context.teleportBuffers) {
      context.teleportBuffers = {}
    }
    if (!context.teleportBuffers[to]) {
      context.teleportBuffers[to] = ''
    }
    context.teleportBuffers[to] += teleportContent
  } else {
    // 如果目标元素存在，直接渲染
    buffer.push(teleportContent)
  }
}

这段代码的核心逻辑是：

当遇到 teleport 组件时，调用 handleTeleport 函数处理。
handleTeleport 函数首先解析 to 属性，找到目标元素。
如果目标元素不存在（比如在 SSR 过程中），就把 teleport 的内容存储到 context.teleportBuffers 对象中，key 是 to 属性的值。
如果目标元素存在（比如在客户端激活之后），就直接把 teleport 的内容渲染到目标元素中。

举个例子，如果你的 teleport 组件是这样的：

<teleport to="#modal-container">
  <div>我是弹窗内容</div>
</teleport>

那么在 SSR 过程中，context.teleportBuffers 可能会变成这样：

context.teleportBuffers = {
  '#modal-container': '<div>我是弹窗内容</div>'
};

甜点：teleport 在客户端激活 (Hydration) 中的应用

当浏览器拿到 SSR 渲染的 HTML 字符串后，Vue 会进行客户端激活 (hydration)，把静态的 HTML 变成可交互的 Vue 组件。

在 hydration 过程中，Vue 会遍历整个 DOM 树，找到需要激活的组件，然后把组件和 DOM 节点关联起来。

对于 teleport 组件，Vue 需要做两件事：

找到 teleport 组件对应的 DOM 节点。
把 teleportBuffers 中存储的内容“传送”到目标位置。

在 packages/runtime-core/src/renderer.ts 文件里，你可以找到相关的代码：

// renderer.ts

function hydrate(
  vnode: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean
): RendererNode {
  // ... 一些初始化工作 ...

  const { type } = vnode
  if (type === TeleportImpl) {
    // 处理 Teleport 组件
    processTeleport(
      vnode as TeleportVNode,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized,
      true // isHydrating
    )
  } else {
    // 处理其他类型的组件
    // ...
  }
}

function processTeleport(
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean,
  isHydrating: boolean
) {
  const { props, children } = n2
  const target = resolveTarget(props.to)  //解决 to 属性

  if (target) {
    // 从 teleportBuffers 中取出内容并插入到目标元素中
    if (isHydrating) {
      const teleportContent = getTeleportContent(props.to)
      if (teleportContent) {
          target.innerHTML = teleportContent; // 将缓存的 HTML 插入到目标元素
      }
    }

    // ... 后续处理 ...
  }
}

function getTeleportContent(targetSelector: string): string | undefined {
  // 获取服务端渲染时缓存的 teleport 内容
  const ssrContext = (getCurrentComponent() as any)?.ssrContext;
  if (ssrContext && ssrContext.teleportBuffers && ssrContext.teleportBuffers[targetSelector]) {
    return ssrContext.teleportBuffers[targetSelector];
  }
  return undefined;
}

这段代码的核心逻辑是：

当 hydration 遇到 teleport 组件时，调用 processTeleport 函数处理。
processTeleport 函数首先解析 to 属性，找到目标元素。
然后，从 ssrContext.teleportBuffers 中取出对应的内容（也就是 SSR 过程中缓存的 HTML 字符串）。
最后，把取出的内容插入到目标元素中。

这样，teleport 组件的内容就被成功地“传送”到了目标位置，完成了 hydration 过程。

代码之外的思考：teleport 的应用场景

除了弹窗之外，teleport 还有很多其他的应用场景：

模态框 (Modal)： 就像我们一开始的例子一样，把模态框渲染到 body 标签的末尾，避免被父元素的样式影响。
提示框 (Tooltip)： 把提示框渲染到鼠标旁边，实现跟随鼠标的效果。
下拉菜单 (Dropdown)： 把下拉菜单渲染到触发元素的下方，实现下拉效果。
全屏组件： 把全屏组件渲染到 body 标签的末尾，实现全屏效果。
Portal 组件： 在一些 UI 库中，Portal 组件的实现也离不开 teleport。

总结：teleport 的灵魂

teleport 组件的灵魂在于：它提供了一种灵活的方式，可以把组件的内容渲染到 DOM 树的任何地方，而不用管组件本身在哪个位置。这在构建复杂的 UI 界面时非常有用。

在 SSR 中，teleport 通过 teleportBuffers 对象，把内容缓存起来，然后在客户端激活的时候，再把内容“传送”到目标位置，实现了服务端渲染和客户端激活的完美结合。

表格总结：teleport 在 SSR 和 Hydration 中的流程

阶段	过程	涉及的数据结构	关键函数
SSR	1. 遇到 `teleport` 组件。 2. 解析 `to` 属性，找到目标元素。 3. 如果目标元素不存在，把内容存储到 `context.teleportBuffers` 中。	`context.teleportBuffers`	`handleTeleport`
Hydration	1. 遇到 `teleport` 组件。 2. 解析 `to` 属性，找到目标元素。 3. 从 `ssrContext.teleportBuffers` 中取出内容。 4. 把内容插入到目标元素中。	`ssrContext.teleportBuffers`	`processTeleport`, `getTeleportContent`

彩蛋：teleport 的一些坑

to 属性必须是有效的 CSS 选择器。 否则，teleport 无法找到目标元素。
teleport 的内容在 SSR 过程中会被缓存，所以在客户端激活之前，无法动态更新。 如果你需要动态更新 teleport 的内容，可以考虑在客户端激活之后再进行渲染。
在复杂的 SSR 项目中，可能会遇到 teleportBuffers 对象过大的问题。 这时候，可以考虑对 teleportBuffers 进行优化，比如只缓存必要的内容。

好了，今天的讲座就到这里。希望大家对 Vue 3 的 teleport 组件有了更深入的了解。记住，源码虐我千百遍，我待源码如初恋。咱们下期再见！

发表回复 取消回复

发表回复取消回复