一个超冷门的 Vue3 内置组件，帮我优化了66%的性能！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~buF28资讯网——每日最新资讯28at.com

背景

最近项目中有一个页面，是之前的老页面，页面中的内容其实就是一个 Tabs 组件，有三个 Tab，分别展示不同的内容，但是也有共同内容，那就是共同都有一个一个报表组件buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

下面是大致的代码展示如下，为了方便大家阅读吗，我把代码简化了buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

Chart.vue中会进行大量的请求，这里我就直接简单模拟一下了buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

但是当我阅读到这一段旧代码时，我就觉得不太妙，这代码这么写，显然是没有考虑到性能问题，我们可以切换 Tab1 -> Tab2 -> Tab3 ，会发现 Chart.vue 请求了三次！！！buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

但是其实只需要请求一次就够了，因为其实都是一样的数据、一样的组件，并且 Chart.vue 内部的请求其实是很多个的，这样就大大浪费了浏览器资源buF28资讯网——每日最新资讯28at.com

改进？

其实很多人第一时间就是想到了，我们可以只请求一次，然后让这三个 Chart 共用同一份数据，这样做就能保证只请求一次了buF28资讯网——每日最新资讯28at.com

确实，这样做大大提升了性能，大致的代码如下，也就是把请求放在 Index 中去做，然后把数据传给三个 ChartbuF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

Chart 中只需要接收，并渲染即可buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

现在切换 Tab1 -> Tab2 -> Tab3，发现确实只请求了一次了，这对于这个页面，简直是很大的提升！buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

结束了吗？

其实 Chart 内部拿到数据之后，会拿着数据去渲染很多的东西（这里我简化了而已，其实很多的）。buF28资讯网——每日最新资讯28at.com

刚刚我们只是保证了请求是一次，但是我们并没有保证渲染是一次哦~我们可以给 Chart 的 onMounted 中加个打印buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

切换 Tab1 -> Tab2 -> Tab3，可以看到总共渲染了三次，这其实也降低了页面的性能，理想是只渲染一次即可buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

巧妙使用 Teleport

也就是，我需要做到只渲染一次 Chart，但是需要渲染到不同的三个 Tab 中去~buF28资讯网——每日最新资讯28at.com

那就只能是动态地去渲染了，根据选择不同的 Tab，去决定 Chart 渲染到哪个 Tab 下了buF28资讯网——每日最新资讯28at.com

这时候我就想到了 Teleport 了，这是一个 Vue3 提供的 全局组件，类似于一个传送门，能把一个 DOM 节点渲染到另一个 DOM 节点上buF28资讯网——每日最新资讯28at.com

改进后的代码如下buF28资讯网——每日最新资讯28at.com

图片buF28资讯网——每日最新资讯28at.com

现在切换 Tab1 -> Tab2 -> Tab3，可以看到buF28资讯网——每日最新资讯28at.com

• 请求只一次
• 渲染只一次

真是太妙了！！！buF28资讯网——每日最新资讯28at.com

图片 buF28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-75321-0.html一个超冷门的 Vue3 内置组件，帮我优化了66%的性能！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Java的函数式接口编程示例

下一篇： 是否还记得SpringMVC中的@MatrixVariable注解？