背景

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

圖片

圖片

后來產品說這個顏色選擇器的圖標不好看，所以換了一個圖標來顯示顏色選擇器，于是頁面變成了下面這樣的效果，我把原本的顏色切換的圖標隱藏起來，換了另一個圖標代替

圖片

圖片

滿屏都是

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

圖片

圖片

這會導致頁面非常卡，為啥呢？因為每一項就有一個顏色選擇器！太多顏色選擇器了，我們可以審查元素，發(fā)現顏色選擇器面板的 DOM 非常多！！！

圖片

怎么優(yōu)化呢？

其實就是因為顏色選擇器太多了才導致的卡頓，那么，我們只需要保證整個頁面只有一個顏色選擇器即可！

• 第一步：先在頁面放一個顏色選擇器。
• 第二步：當點擊圖標1時，將顏色選擇器移動到對應位置。
• 第三步：當點擊圖標2時，將顏色選擇器移動到對應位置。
• 第四步：以此類推。

圖片

Teleport

很多人看到剛剛的優(yōu)化手段，就想著使用 鼠標點擊坐標定位 的方式去移動顏色選擇器，其實不需要，因為Vue3已經為我們提供了一個現成的傳送門組件Teleport。

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

圖片

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

接著我們在 Index.vue 中去將這個 單例顏色選擇器 進行掛載。

圖片

我們需要將 Item.vue 中的顏色選擇器去掉，換成一個占位的地方，用來讓顏色選擇器傳送，而這個占位的地方我們需要保證是獨一無二的，不然會造成傳送出錯，這里我使用了 lodash.uniqueId。

圖片

現在我們可以看到，整個頁面只有一個顏色選擇器了，非常好，整個頁面瞬間變得不卡頓了！！！

再來看看效果，發(fā)現符合我們的預期！

適用于多 Tab 切換

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

示例盡量簡化，方便大家理解。

比如下面的例子，其實每一個 Tab 展示的都是同一個內容。

圖片

圖片

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

圖片

結果也能達到預期效果。

圖片