前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

背景

最近項目中有一個頁面，是之前的老頁面，頁面中的內容其實就是一個 Tabs 組件，有三個 Tab，分別展示不同的內容，但是也有共同內容，那就是共同都有一個一個報表組件

圖片

下面是大致的代碼展示如下，為了方便大家閱讀嗎，我把代碼簡化了

圖片

Chart.vue中會進行大量的請求，這里我就直接簡單模擬一下了

圖片

但是當我閱讀到這一段舊代碼時，我就覺得不太妙，這代碼這么寫，顯然是沒有考慮到性能問題，我們可以切換 Tab1 -> Tab2 -> Tab3 ，會發現 Chart.vue 請求了三次?。?！

圖片

但是其實只需要請求一次就夠了，因為其實都是一樣的數據、一樣的組件，并且 Chart.vue 內部的請求其實是很多個的，這樣就大大浪費了瀏覽器資源

改進？

其實很多人第一時間就是想到了，我們可以只請求一次，然后讓這三個 Chart 共用同一份數據，這樣做就能保證只請求一次了

確實，這樣做大大提升了性能，大致的代碼如下，也就是把請求放在 Index 中去做，然后把數據傳給三個 Chart

圖片

Chart 中只需要接收，并渲染即可

圖片

現在切換 Tab1 -> Tab2 -> Tab3，發現確實只請求了一次了，這對于這個頁面，簡直是很大的提升！

圖片

結束了嗎？

其實 Chart 內部拿到數據之后，會拿著數據去渲染很多的東西（這里我簡化了而已，其實很多的）。

剛剛我們只是保證了請求是一次，但是我們并沒有保證渲染是一次哦~我們可以給 Chart 的 onMounted 中加個打印

圖片

切換 Tab1 -> Tab2 -> Tab3，可以看到總共渲染了三次，這其實也降低了頁面的性能，理想是只渲染一次即可

圖片

巧妙使用 Teleport

也就是，我需要做到只渲染一次 Chart，但是需要渲染到不同的三個 Tab 中去~

那就只能是動態地去渲染了，根據選擇不同的 Tab，去決定 Chart 渲染到哪個 Tab 下了

這時候我就想到了 Teleport 了，這是一個 Vue3 提供的 全局組件，類似于一個傳送門，能把一個 DOM 節點渲染到另一個 DOM 節點上

改進后的代碼如下

圖片

現在切換 Tab1 -> Tab2 -> Tab3，可以看到

• 請求只一次
• 渲染只一次

真是太妙了！??！

圖片