背景 当我们想在 vue 中开发一个能够指定位置渲染的组件例如 tooltip、modal 时可能首先想到的是去引 ui 库中的组件，或者自己手写一个，但 vue3 中提供的内置组件 Teleport 能够帮我们轻松解决问题，下面就来介绍下它的用法以及实现原理 正文 官网对于它的介绍是： <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去 用法及属性 用法还是挺简单的，然后来看下需要注意的地方 Tip <Teleport> 挂载时，传送的 to 目标必须已经存在于 DOM 中。如果目标元素也是由 Vue 渲染的，需要确保在挂载 <Teleport> 之前先挂载该元素可以搭配组件使用，只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系，<Teleport> 和内部组件始终保持父子关系，也就是说 props 和 provide 都可以正常使用多个 Teleport 会共享目标，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是顺次追加 结果: <div class=".modal">  <div>A</div>  <div>B</div></div> 实现一个简单的 tooltip 实现的大概逻辑就是鼠标目标元素上划过时更改 teleport 内部元素的透明度，移除时将透明度改为 0 看完用法，接着就到本文的重点了，让我们来探究下核心源码是怎么实现的 原理 首先我们可以考虑的问题是将 teleport 的渲染和正常 vnode 的渲染分离开，这样做的优点是： 渲染函数中保持整洁当我们没有使用 Teleport 时，因为将这个渲染逻辑单独抽出来，所以可以利用 tree-shaking 将相关的代码删除。所以 vue 的做法是针对 teleport 组件重新写了套渲染代码： 在 renderer 的 patch 函数中，如果遇到类型是 teleport 的，就使用自己的挂载方法，这里的 TeleportImpl 就是具体的实现对象 移动函数move 下面我们来看具体是怎么实现的(保留核心代码) 对应的位置在仓库的Teleport.ts文件中 然后我们看 process 里的重要函数 moveTarget resolveTarget 看起来有些复杂，不过让我们理一下思路：上面我们提到了要实现自己的渲染方法，所以我们可以先写基本的渲染函数，然后在内部需要区分是首次挂载还是组件更新，但如果是 teleport 的接收的参数更改了呢，所以这时候就要去主动实现一个 move 函数将内容移动到新的节点下。好了，有了思路后我们来尝试写出来 先来实现组件的挂载与更新 上面我们提到了更新，但如果是 to 属性更改了呢，所以需要有个分支来处理 传入 move 函数 这里我们省略了处理 disabled 的 remove 函数，不是本文研究的重点，具体可以看源码的 Teleport 文件 到此这篇关于Vue内置组件Teleport的使用的文章就介绍到这了,更多相关Vue Teleport内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！