背景

最近有一個(gè)需求是需要做消息列表的顏色切換，大概頁(yè)面如下，通過顏色選擇器去切換前面消息文本的顏色。

圖片

圖片

后來(lái)產(chǎn)品說(shuō)這個(gè)顏色選擇器的圖標(biāo)不好看，所以換了一個(gè)圖標(biāo)來(lái)顯示顏色選擇器，于是頁(yè)面變成了下面這樣的效果，我把原本的顏色切換的圖標(biāo)隱藏起來(lái)，換了另一個(gè)圖標(biāo)代替

圖片

圖片

滿屏都是

后面又有新的需求，消息可能會(huì)有很多，甚至鋪滿整個(gè)屏幕。

圖片

圖片

這會(huì)導(dǎo)致頁(yè)面非常卡，為啥呢？因?yàn)槊恳豁?xiàng)就有一個(gè)顏色選擇器！太多顏色選擇器了，我們可以審查元素，發(fā)現(xiàn)顏色選擇器面板的 DOM 非常多?。?！

圖片

怎么優(yōu)化呢？

其實(shí)就是因?yàn)轭伾x擇器太多了才導(dǎo)致的卡頓，那么，我們只需要保證整個(gè)頁(yè)面只有一個(gè)顏色選擇器即可！

• 第一步：先在頁(yè)面放一個(gè)顏色選擇器。
• 第二步：當(dāng)點(diǎn)擊圖標(biāo)1時(shí)，將顏色選擇器移動(dòng)到對(duì)應(yīng)位置。
• 第三步：當(dāng)點(diǎn)擊圖標(biāo)2時(shí)，將顏色選擇器移動(dòng)到對(duì)應(yīng)位置。
• 第四步：以此類推。

圖片

Teleport

很多人看到剛剛的優(yōu)化手段，就想著使用 鼠標(biāo)點(diǎn)擊坐標(biāo)定位 的方式去移動(dòng)顏色選擇器，其實(shí)不需要，因?yàn)閂ue3已經(jīng)為我們提供了一個(gè)現(xiàn)成的傳送門組件Teleport。

我們需要先封裝一個(gè)單例顏色選擇器，確保整個(gè)頁(yè)面只有這么一個(gè)，且使用 Teleport 將它包起來(lái)，并且他的圖標(biāo)是不可見的，這里渲染組件我們可以使用 h 方法。

圖片

我們需要先將 Item.vue 中的顏色選擇器去掉，換成一個(gè)占位的地方，用來(lái)讓顏色選擇器傳送。

接著我們?cè)?nbsp;Index.vue 中去將這個(gè) 單例顏色選擇器 進(jìn)行掛載。

圖片

我們需要將 Item.vue 中的顏色選擇器去掉，換成一個(gè)占位的地方，用來(lái)讓顏色選擇器傳送，而這個(gè)占位的地方我們需要保證是獨(dú)一無(wú)二的，不然會(huì)造成傳送出錯(cuò)，這里我使用了 lodash.uniqueId。

圖片

現(xiàn)在我們可以看到，整個(gè)頁(yè)面只有一個(gè)顏色選擇器了，非常好，整個(gè)頁(yè)面瞬間變得不卡頓了?。?！

再來(lái)看看效果，發(fā)現(xiàn)符合我們的預(yù)期！

適用于多 Tab 切換

Teleport 還適用于很多場(chǎng)景的優(yōu)化，比如多 Tab 切換，但是每一個(gè) Tab 都是顯示了同一個(gè)組件，這個(gè)時(shí)候你也可以使用 Teleport 去優(yōu)化。

示例盡量簡(jiǎn)化，方便大家理解。

比如下面的例子，其實(shí)每一個(gè) Tab 展示的都是同一個(gè)內(nèi)容。

圖片

圖片

我們可以使用 Teleport 將內(nèi)容包起來(lái)，并監(jiān)聽 Tab 的切換，進(jìn)行動(dòng)態(tài)傳送。

圖片

結(jié)果也能達(dá)到預(yù)期效果。

圖片