Vue 3 Teleport 组件：深入源码分析

2024-01-15 00:14:43

Teleport 组件是一个 Vue 3 中强大的工具，它允许开发人员将组件动态地移动到应用程序中的不同位置。这在需要跨越不同层级嵌套组件的应用程序中特别有用。

本文将深入剖析 Vue 3 Teleport 组件的源码，揭示它的内部机制和巧妙的设计。

Teleport 组件的挂载

当 Teleport 组件被挂载时，它会根据其属性的值确定其挂载点。

export default {
  props: {
    to: {
      type: String,
      required: true,
    },
    disabled: Boolean,
  },

  created() {
    this._teleportParent = document.querySelector(this.to)
  },

  mounted() {
    if (!this.disabled) {
      this._teleport()
    }
  },

  // ...
}

如果属性没有被禁用，组件将使用内部的 _teleport() 方法将自己移动到指定的挂载点。

Teleport 组件的更新

当 Teleport 组件被更新时，它会根据以下因素重新评估其位置：

<teleport> 属性是否被禁用
to 属性是否发生变化

updated() {
  this._teleport()
},

如果任何一个条件满足，组件将再次使用 _teleport() 方法移动到适当的挂载点。

`_teleport()` 方法

_teleport() 方法是 Teleport 组件的核心。它负责将组件移动到指定的挂载点。

_teleport() {
  if (this.disabled) {
    return
  }

  const parent = this._teleportParent
  const host = this.$el

  if (!parent || !host) {
    return
  }

  // ...
}

该方法首先检查 <teleport> 属性是否被禁用，如果被禁用，则不会进行移动。然后，它获取组件的当前宿主元素和目标挂载点。

如果宿主元素和挂载点都存在，_teleport() 方法将执行以下步骤：