Vue3 的 Teleport 是个性能利器,为啥大家都死活不用?

开发 前端
很多人看到刚刚的优化手段,就想着使用 鼠标点击坐标定位 的方式去移动颜色选择器,其实不需要,因为Vue3已经为我们提供了一个现成的传送门组件Teleport。

背景

最近有一个需求是需要做消息列表的颜色切换,大概页面如下,通过颜色选择器去切换前面消息文本的颜色。

图片图片

图片图片

后来产品说这个颜色选择器的图标不好看,所以换了一个图标来显示颜色选择器,于是页面变成了下面这样的效果,我把原本的颜色切换的图标隐藏起来,换了另一个图标代替

图片图片

图片图片

满屏都是

后面又有新的需求,消息可能会有很多,甚至铺满整个屏幕。

图片图片

图片图片

这会导致页面非常卡,为啥呢?因为每一项就有一个颜色选择器!太多颜色选择器了,我们可以审查元素,发现颜色选择器面板的 DOM 非常多!!!

图片图片

怎么优化呢?

其实就是因为颜色选择器太多了才导致的卡顿,那么,我们只需要保证整个页面只有一个颜色选择器即可!

  • 第一步:先在页面放一个颜色选择器。
  • 第二步:当点击图标1时,将颜色选择器移动到对应位置。
  • 第三步:当点击图标2时,将颜色选择器移动到对应位置。
  • 第四步:以此类推。

图片图片

Teleport

很多人看到刚刚的优化手段,就想着使用 鼠标点击坐标定位 的方式去移动颜色选择器,其实不需要,因为Vue3已经为我们提供了一个现成的传送门组件Teleport。

我们需要先封装一个单例颜色选择器,确保整个页面只有这么一个,且使用 Teleport 将它包起来,并且他的图标是不可见的,这里渲染组件我们可以使用 h 方法。

图片图片

我们需要先将 Item.vue 中的颜色选择器去掉,换成一个占位的地方,用来让颜色选择器传送。

接着我们在 Index.vue 中去将这个 单例颜色选择器 进行挂载。

图片图片

我们需要将 Item.vue 中的颜色选择器去掉,换成一个占位的地方,用来让颜色选择器传送,而这个占位的地方我们需要保证是独一无二的,不然会造成传送出错,这里我使用了 lodash.uniqueId。

图片图片

现在我们可以看到,整个页面只有一个颜色选择器了,非常好,整个页面瞬间变得不卡顿了!!!

图片

再来看看效果,发现符合我们的预期!

图片

适用于多 Tab 切换

Teleport 还适用于很多场景的优化,比如多 Tab 切换,但是每一个 Tab 都是显示了同一个组件,这个时候你也可以使用 Teleport 去优化。

示例尽量简化,方便大家理解。

比如下面的例子,其实每一个 Tab 展示的都是同一个内容。

图片图片

图片图片

我们可以使用 Teleport 将内容包起来,并监听 Tab 的切换,进行动态传送。

图片图片

结果也能达到预期效果。

图片 图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2020-12-01 08:34:31

Vue3组件实践

2021-03-31 08:01:50

Vue3 Vue2 Vue3 Telepo

2021-05-12 10:25:29

开发技能代码

2023-04-27 11:07:24

Setup语法糖Vue3

2023-11-29 09:05:59

Vue 3场景

2022-08-15 12:31:32

Vue3TypeScript

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-10-29 07:47:35

Vue 3teleport传送门组件

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-12-02 05:50:35

Vue3 插件Vue应用

2024-08-13 09:26:07

2020-09-19 21:15:26

Composition

2021-12-08 09:09:33

Vue 3 Computed Vue2

2024-01-04 08:38:21

Vue3API慎用

2020-11-12 08:32:14

Vue3模板优化

2022-06-21 12:09:18

Vue差异

2024-04-11 13:10:00

Vue3Reactive响应性

2024-05-24 08:37:46

2021-05-26 10:40:28

Vue3TypeScript前端
点赞
收藏

51CTO技术栈公众号