7月安卓手機性價比榜：努比亞+紅魔兩款新機入榜
7月登場的新機有努比亞Z50S Pro和紅魔8S Pro，除了三星之外目前唯二的兩款搭載超頻版驍龍8Gen2處理器的產品，而且努比亞和紅魔也一貫有著不錯的性價比，所以在本次的性價比榜單
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
最近項目中有一個頁面，是之前的老頁面，頁面中的內容其實就是一個 Tabs 組件，有三個 Tab，分別展示不同的內容，但是也有共同內容，那就是共同都有一個一個報表組件
圖片
下面是大致的代碼展示如下，為了方便大家閱讀嗎，我把代碼簡化了
圖片
Chart.vue中會進行大量的請求，這里我就直接簡單模擬一下了
圖片
但是當我閱讀到這一段舊代碼時，我就覺得不太妙，這代碼這么寫，顯然是沒有考慮到性能問題，我們可以切換 Tab1 -> Tab2 -> Tab3 ，會發現 Chart.vue 請求了三次！！！
圖片
但是其實只需要請求一次就夠了，因為其實都是一樣的數據、一樣的組件，并且 Chart.vue 內部的請求其實是很多個的，這樣就大大浪費了瀏覽器資源
其實很多人第一時間就是想到了，我們可以只請求一次，然后讓這三個 Chart 共用同一份數據，這樣做就能保證只請求一次了
確實，這樣做大大提升了性能，大致的代碼如下，也就是把請求放在 Index 中去做，然后把數據傳給三個 Chart
圖片
Chart 中只需要接收，并渲染即可
圖片
現在切換 Tab1 -> Tab2 -> Tab3，發現確實只請求了一次了，這對于這個頁面，簡直是很大的提升！
圖片
其實 Chart 內部拿到數據之后，會拿著數據去渲染很多的東西（這里我簡化了而已，其實很多的）。
剛剛我們只是保證了請求是一次，但是我們并沒有保證渲染是一次哦~我們可以給 Chart 的 onMounted 中加個打印
圖片
切換 Tab1 -> Tab2 -> Tab3，可以看到總共渲染了三次，這其實也降低了頁面的性能，理想是只渲染一次即可
圖片
也就是，我需要做到只渲染一次 Chart，但是需要渲染到不同的三個 Tab 中去~
那就只能是動態地去渲染了，根據選擇不同的 Tab，去決定 Chart 渲染到哪個 Tab 下了
這時候我就想到了 Teleport 了，這是一個 Vue3 提供的 全局組件，類似于一個傳送門，能把一個 DOM 節點渲染到另一個 DOM 節點上
改進后的代碼如下
圖片
現在切換 Tab1 -> Tab2 -> Tab3，可以看到
真是太妙了！！！
圖片
本文鏈接：http://m.www897cc.com/showinfo-26-75321-0.html一個超冷門的 Vue3 內置組件，幫我優化了66%的性能！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Java的函數式接口編程示例
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號