详解Vue3 Teleport 的实践及原理

vue3 的组合式 api 以及基于 proxy 响应式原理已经有很多文章介绍过了，除了这些比较亮眼的更新，vue3 还新增了一个内置组件： teleport 。这个组件的作用主要用来将模板内的 dom 元素移动到其他位置。

使用场景

业务开发的过程中，我们经常会封装一些常用的组件，例如 modal 组件。相信大家在使用 modal 组件的过程中，经常会遇到一个问题，那就是 modal 的定位问题。

话不多说，我们先写一个简单的 modal 组件。

然后我们在页面中引入 modal 组件。

如上图所示， div.container 下弹窗组件正常展示。使用 fixed 进行布局的元素，在一般情况下会相对于屏幕视窗来进行定位，但是如果父元素的 transform , perspective 或 filter 属性不为 none 时， fixed 元素就会相对于父元素来进行定位。

我们只需要把 .container 类的 transform 稍作修改，弹窗组件的定位就会错乱。

这个时候，使用 teleport 组件就能解决这个问题了。

teleport 提供了一种干净的方法，允许我们控制在 dom 中哪个父节点下呈现 html，而不必求助于全局状态或将其拆分为两个组件。 -- vue 官方文档

我们只需要将弹窗内容放入 teleport 内，并设置 to 属性为 body ，表示弹窗组件每次渲染都会做为 body 的子级，这样之前的问题就能得到解决。

可以在 查看代码。

源码解析

我们可以先写一个简单的模板，然后看看 teleport 组件经过模板编译后，生成的代码。

简化后代码：

可以看到 teleport 组件通过 createblock 进行创建。

传入 createblock 的第一个参数为 teleport ，最后得到的 vnode 中会有一个 shapeflag 属性，该属性用来表示 vnode 的类型。 isteleport(type) 得到的结果为 true ，所以 shapeflag 属性最后的值为 shapeflags.teleport （ 1 << 6 ）。

在组件的 render 节点，会依据 type 和 shapeflag 走不同的逻辑。

可以看到，在处理 teleport 时，最后会调用 teleport.process 方法，vue3 中很多地方都是通过 process 的方式来处理 vnode 相关逻辑的，下面我们重点看看 teleport.process 方法做了些什么。

其实原理很简单，就是将 teleport 的 children 挂载到属性 to 对应的 dom 元素中。为了方便理解，这里只是展示了源码的九牛一毛，省略了很多其他的操作。

总结

希望在阅读文章的过程中，大家能够掌握 teleport 组件的用法，并使用到业务场景中。尽管原理十分简单，但是我们有了 teleport 组件，就能轻松解决弹窗元素定位不准确的问题。

到此这篇关于详解vue3 teleport 的实践及原理的文章就介绍到这了,更多相关vue3 teleport组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！