Vue 3源码深度解析之：`Vue`的`Teleport`：它如何处理事件冒泡和组件销毁。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位代码界的弄潮儿们，今天咱们来聊点儿Vue 3里有点意思的东西——Teleport。这玩意儿，说白了，就像个传送门，能把你的组件挪到DOM树的其他地方，听起来是不是有点科幻？但它确实能解决不少实际问题，而且背后的实现原理也挺值得玩味的。

咱们今天的重点是：Teleport怎么处理事件冒泡和组件销毁这两个关键问题。别怕，我会尽量用大白话和代码示例，把这事儿掰开了揉碎了讲清楚。

一、Teleport是啥？为啥要有它？

想象一下，你辛辛苦苦写了个弹窗组件，想让它在页面最外层显示，避免被父组件的overflow: hidden之类的样式给截胡。如果没有Teleport，你就得想办法把这个弹窗组件挪到body下，要么手动操作DOM，要么费劲巴拉地用provide/inject传递上下文，麻烦不说，代码还容易乱。

Teleport就是来拯救你的。它能让你在组件内部写弹窗，但实际上把这个弹窗渲染到你指定的位置。

<template>
  <div>
    <p>这是一个父组件的内容</p>
    <Teleport to="body">
      <div class="modal">
        <p>这是一个弹窗的内容</p>
        <button @click="$emit('close')">关闭</button>
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  emits: ['close'],
}
</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 to="body"就把弹窗组件的内容渲染到了<body>标签下。是不是很方便？

二、事件冒泡的“时空穿梭”

现在问题来了，如果弹窗里的按钮需要触发父组件的事件，事件冒泡会发生什么？是沿着Teleport传送后的DOM结构冒泡，还是沿着Teleport组件所在的原始DOM结构冒泡？

答案是：沿着Teleport组件所在的原始DOM结构冒泡。

也就是说，事件冒泡并没有跟着Teleport一起“时空穿梭”。

这是为什么呢？因为Vue 3在处理事件冒泡时，会记住事件的原始触发路径，即使组件被Teleport传送走了，事件仍然会沿着原始路径向上冒泡。

咱们用代码来模拟一下这个过程（简化版，只关注事件冒泡的关键部分）：

// 假设这是Vue 3内部事件处理的简化逻辑
function triggerEvent(event, element) {
  let currentElement = element;
  while (currentElement) {
    // 获取当前元素上绑定的事件监听器
    const listeners = currentElement.__vueListeners && currentElement.__vueListeners[event.type];

    if (listeners) {
      listeners.forEach(listener => {
        listener(event); // 执行监听器
      });
    }

    // 关键：沿着原始父元素向上冒泡
    currentElement = currentElement.parentNode;
  }
}

// 模拟一个点击事件
const button = document.getElementById('myButton');
const modal = document.querySelector('.modal');
const parent = document.getElementById('parent');

// 在父组件上绑定一个点击事件
parent.__vueListeners = {
  click: [() => console.log('父组件的点击事件被触发了！')]
};

// 在按钮上触发点击事件
button.addEventListener('click', (event) => {
  console.log('按钮被点击了！');
  triggerEvent(event, button); // 模拟Vue的事件触发机制
});

在这个简化的例子里，triggerEvent函数模拟了Vue 3的事件触发机制。关键在于，它沿着parentNode向上冒泡，而parentNode是事件触发时元素的原始父元素，而不是Teleport传送后的父元素。

这样做的好处是，保证了事件冒泡的逻辑一致性，避免了因为Teleport的传送导致事件冒泡行为的混乱。

三、组件销毁：传送门的“善后工作”

Teleport在组件销毁时，需要做哪些“善后工作”呢？

移除传送后的DOM元素：Teleport会将组件的内容传送到指定的目标位置，当组件销毁时，需要把这些传送过去的DOM元素从目标位置移除。
清理相关的资源：如果Teleport在传送过程中创建了一些临时的资源（例如事件监听器），需要在组件销毁时清理掉。

Vue 3是如何处理这些问题的呢？

在Vue 3的源码中，Teleport组件的unmount钩子函数会负责处理这些“善后工作”。

咱们来看一个简化版的Teleport组件的unmount钩子函数：

// 简化版的Teleport组件的unmount钩子函数
function unmountTeleport(vnode) {
  const { container, anchor } = vnode.props; // 获取传送的目标容器和锚点

  // 移除传送后的DOM元素
  if (vnode.el) {
    let current = vnode.el;
    while (current) {
      const next = current.nextSibling;
      container.removeChild(current);
      current = next;
    }
  }

  // 清理相关的资源 (例如事件监听器)
  // ...
}

在这个简化的例子里，unmountTeleport函数首先获取Teleport组件传送的目标容器container，然后遍历传送过去的DOM元素，逐个从container中移除。

这样做确保了当Teleport组件销毁时，传送过去的DOM元素会被干净地移除，不会留下任何“垃圾”。

四、深入源码：窥探Teleport的内部机制

光说不练假把式，咱们来简单看一下Vue 3源码中Teleport组件的核心逻辑（只保留关键部分）：

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

export const TeleportImpl = {
  __isTeleport: true,
  process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, patchSlotChildren, moveTarget) {
    // ... 省略一些初始化和更新的逻辑

    if (n1 == null) {
      // mount
      const target = (targetSelector ? querySelector(targetSelector) : container);

      if (target) {
        // 将children渲染到target
        moveTarget(children, target, anchor, MoveType.ENTER);
      } else {
        warn(`Invalid Teleport target on mount: ${targetSelector} is not a valid query selector.`);
      }
    } else {
      // update
      // ... 省略更新的逻辑
    }
  },

  remove(vnode, parentComponent, parentSuspense, doRemove, optimized) {
    // ... 省略一些清理的逻辑

    // 移除传送后的DOM元素
    const { container, anchor } = vnode.props;
    let current = vnode.el;
    while (current) {
      const next = current.nextSibling;
      container.removeChild(current);
      current = next;
    }

    // ... 省略一些清理的逻辑
  }
};

在这个源码片段中，process函数负责处理Teleport组件的挂载和更新逻辑，remove函数负责处理Teleport组件的卸载逻辑。

process函数会将Teleport组件的children渲染到指定的目标容器target中，remove函数会将传送过去的DOM元素从目标容器中移除。

五、Teleport的应用场景

Teleport的应用场景非常广泛，常见的包括：

弹窗、对话框：将弹窗组件渲染到<body>标签下，避免被父组件的样式影响。
模态框：与弹窗类似，将模态框组件渲染到<body>标签下。
Toast提示：将Toast提示组件渲染到页面顶部，确保其始终可见。
在不同的DOM树之间共享组件：例如，在不同的iframe之间共享组件。

六、总结

Teleport是Vue 3中一个非常实用的组件，它可以让你轻松地将组件渲染到DOM树的其他位置，解决了不少实际问题。

咱们今天主要聊了Teleport如何处理事件冒泡和组件销毁这两个关键问题：

事件冒泡：事件冒泡沿着Teleport组件所在的原始DOM结构冒泡，而不是沿着Teleport传送后的DOM结构冒泡。
组件销毁：Teleport组件在销毁时，会移除传送后的DOM元素，并清理相关的资源。

希望通过今天的讲解，大家对Teleport的内部机制有了更深入的了解。

表格总结：Teleport的关键特性

特性	描述
传送目标	可以将组件的内容传送到指定的DOM元素或CSS选择器对应的元素。
事件冒泡	事件沿着Teleport组件所在的原始DOM结构冒泡。
组件销毁	在组件销毁时，Teleport会移除传送后的DOM元素，并清理相关的资源。
应用场景	弹窗、对话框、模态框、Toast提示、在不同的DOM树之间共享组件等。
源码位置	`packages/runtime-core/src/components/Teleport.ts` (Vue 3 源码)

好了，今天的“Teleport时空穿梭之旅”就到这里了。希望大家有所收获，下次再见！

发表回复 取消回复

发表回复取消回复