前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~SlD28資訊網——每日最新資訊28at.com

背景

最近項目中有一個頁面，是之前的老頁面，頁面中的內容其實就是一個 Tabs 組件，有三個 Tab，分別展示不同的內容，但是也有共同內容，那就是共同都有一個一個報表組件SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

下面是大致的代碼展示如下，為了方便大家閱讀嗎，我把代碼簡化了SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

Chart.vue中會進行大量的請求，這里我就直接簡單模擬一下了SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

但是當我閱讀到這一段舊代碼時，我就覺得不太妙，這代碼這么寫，顯然是沒有考慮到性能問題，我們可以切換 Tab1 -> Tab2 -> Tab3 ，會發現 Chart.vue 請求了三次！！！SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

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

改進？

其實很多人第一時間就是想到了，我們可以只請求一次，然后讓這三個 Chart 共用同一份數據，這樣做就能保證只請求一次了SlD28資訊網——每日最新資訊28at.com

確實，這樣做大大提升了性能，大致的代碼如下，也就是把請求放在 Index 中去做，然后把數據傳給三個 ChartSlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

Chart 中只需要接收，并渲染即可SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

現在切換 Tab1 -> Tab2 -> Tab3，發現確實只請求了一次了，這對于這個頁面，簡直是很大的提升！SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

結束了嗎？

其實 Chart 內部拿到數據之后，會拿著數據去渲染很多的東西（這里我簡化了而已，其實很多的）。SlD28資訊網——每日最新資訊28at.com

剛剛我們只是保證了請求是一次，但是我們并沒有保證渲染是一次哦~我們可以給 Chart 的 onMounted 中加個打印SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

切換 Tab1 -> Tab2 -> Tab3，可以看到總共渲染了三次，這其實也降低了頁面的性能，理想是只渲染一次即可SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

巧妙使用 Teleport

也就是，我需要做到只渲染一次 Chart，但是需要渲染到不同的三個 Tab 中去~SlD28資訊網——每日最新資訊28at.com

那就只能是動態地去渲染了，根據選擇不同的 Tab，去決定 Chart 渲染到哪個 Tab 下了SlD28資訊網——每日最新資訊28at.com

這時候我就想到了 Teleport 了，這是一個 Vue3 提供的 全局組件，類似于一個傳送門，能把一個 DOM 節點渲染到另一個 DOM 節點上SlD28資訊網——每日最新資訊28at.com

改進后的代碼如下SlD28資訊網——每日最新資訊28at.com

圖片SlD28資訊網——每日最新資訊28at.com

現在切換 Tab1 -> Tab2 -> Tab3，可以看到SlD28資訊網——每日最新資訊28at.com

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

真是太妙了！！！SlD28資訊網——每日最新資訊28at.com

圖片 SlD28資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-75321-0.html一個超冷門的 Vue3 內置組件，幫我優化了66%的性能！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java的函數式接口編程示例

下一篇： 是否還記得SpringMVC中的@MatrixVariable注解？