前言
最近在項目中遇到一個需求，一個頁面中有一個Tabs組件，有多個tab，分別展示不同的內(nèi)容，但是每個tab中都有一個共同table列表。
代碼展示如下，為了方便閱讀查看，以下是我敲的一個簡單的例子。
實際list.vue組件內(nèi)的業(yè)務很復雜,有大量的請求。
在切換Tab1-->Tab2-->Tab3,發(fā)現(xiàn)list.vue中的接口請求了三次。
理論上只需要請求一次就可以了，因為list.vue組件是一樣的，數(shù)據(jù)也一樣，假如list.vue組件內(nèi)有很多請求，多次請求就非常的浪費瀏覽器資源。
如何改進呢？只需改成請求一次，共用數(shù)據(jù)就可以了。方法是將請求放在index中請求，然后將數(shù)據(jù)傳給list組件就OK了，代碼如下：
list中只需要接收并渲染就行
現(xiàn)在切換Tab1-->Tab2-->Tab3只請求了一次，請求資源大大的節(jié)省了
其實這不算徹底結束，還可以進一步優(yōu)化。list頁面可能是很復雜的結構渲染（這里我只是舉了簡單的例子），上面只是保證了只請求一次，但是并沒有保證只渲染一次哦，如何驗證呢？只需要在list組件中的onMounted中加個打印就知道了。
切換Tab1-->Tab2-->Tab3,看到渲染了三次，理論只需要渲染一次就行
使用內(nèi)置組件Teleport，只渲染一次list組件，但是需要顯示到三個不同的tab中去。Teleport是vue3提供的一個全局組件，類似一個傳送帶，能把一個 DOM 節(jié)點渲染到另一個 DOM 節(jié)點上，也就是將一個DOM節(jié)點傳送給指定的DOM節(jié)點上。優(yōu)化后的代碼如下：
現(xiàn)在在切換Tab1-->Tab2-->Tab3，會發(fā)現(xiàn)只請求一次，只渲染一次，真的很贊；
