前言
最近在项目中遇到一个需求，一个页面中有一个Tabs组件，有多个tab，分别展示不同的内容，但是每个tab中都有一个共同table列表。
1.gif
代码展示如下，为了方便阅读查看，以下是我敲的一个简单的例子。
image.png
实际list.vue组件内的业务很复杂,有大量的请求。
image.png
在切换Tab1-->Tab2-->Tab3,发现list.vue中的接口请求了三次。
image.png
理论上只需要请求一次就可以了，因为list.vue组件是一样的，数据也一样，假如list.vue组件内有很多请求，多次请求就非常的浪费浏览器资源。
如何改进呢？只需改成请求一次，共用数据就可以了。方法是将请求放在index中请求，然后将数据传给list组件就OK了，代码如下：
image.png
list中只需要接收并渲染就行
image.png
现在切换Tab1-->Tab2-->Tab3只请求了一次，请求资源大大的节省了
image.png
其实这不算彻底结束，还可以进一步优化。list页面可能是很复杂的结构渲染（这里我只是举了简单的例子），上面只是保证了只请求一次，但是并没有保证只渲染一次哦，如何验证呢？只需要在list组件中的onMounted中加个打印就知道了。
image.png
切换Tab1-->Tab2-->Tab3,看到渲染了三次，理论只需要渲染一次就行
image.png
使用内置组件Teleport，只渲染一次list组件，但是需要显示到三个不同的tab中去。Teleport是vue3提供的一个全局组件，类似一个传送带，能把一个 DOM 节点渲染到另一个 DOM 节点上，也就是将一个DOM节点传送给指定的DOM节点上。优化后的代码如下：
image.png
现在在切换Tab1-->Tab2-->Tab3，会发现只请求一次，只渲染一次，真的很赞；
image.png
