前言

最近在項(xiàng)目中遇到一個(gè)需求，一個(gè)頁(yè)面中有一個(gè)Tabs組件，有多個(gè)tab，分別展示不同的內(nèi)容，但是每個(gè)tab中都有一個(gè)共同table列表。

1.gif

代碼展示如下，為了方便閱讀查看，以下是我敲的一個(gè)簡(jiǎn)單的例子。

image.png

實(shí)際list.vue組件內(nèi)的業(yè)務(wù)很復(fù)雜,有大量的請(qǐng)求。

image.png

在切換Tab1-->Tab2-->Tab3,發(fā)現(xiàn)list.vue中的接口請(qǐng)求了三次。

image.png

理論上只需要請(qǐng)求一次就可以了，因?yàn)閘ist.vue組件是一樣的，數(shù)據(jù)也一樣，假如list.vue組件內(nèi)有很多請(qǐng)求，多次請(qǐng)求就非常的浪費(fèi)瀏覽器資源。

如何改進(jìn)呢？只需改成請(qǐng)求一次，共用數(shù)據(jù)就可以了。方法是將請(qǐng)求放在index中請(qǐng)求，然后將數(shù)據(jù)傳給list組件就OK了，代碼如下：

image.png

list中只需要接收并渲染就行

image.png

現(xiàn)在切換Tab1-->Tab2-->Tab3只請(qǐng)求了一次，請(qǐng)求資源大大的節(jié)省了

image.png

其實(shí)這不算徹底結(jié)束，還可以進(jìn)一步優(yōu)化。list頁(yè)面可能是很復(fù)雜的結(jié)構(gòu)渲染（這里我只是舉了簡(jiǎn)單的例子），上面只是保證了只請(qǐng)求一次，但是并沒(méi)有保證只渲染一次哦，如何驗(yàn)證呢？只需要在list組件中的onMounted中加個(gè)打印就知道了。

image.png

切換Tab1-->Tab2-->Tab3,看到渲染了三次，理論只需要渲染一次就行

image.png

使用內(nèi)置組件Teleport，只渲染一次list組件，但是需要顯示到三個(gè)不同的tab中去。Teleport是vue3提供的一個(gè)全局組件，類似一個(gè)傳送帶，能把一個(gè) DOM 節(jié)點(diǎn)渲染到另一個(gè) DOM 節(jié)點(diǎn)上，也就是將一個(gè)DOM節(jié)點(diǎn)傳送給指定的DOM節(jié)點(diǎn)上。優(yōu)化后的代碼如下：

image.png

現(xiàn)在在切換Tab1-->Tab2-->Tab3，會(huì)發(fā)現(xiàn)只請(qǐng)求一次，只渲染一次，真的很贊；

image.png