https://uniapp.dcloud.io/performance
在 uni-app
中,定義在 data 裏面的數據每次變化時都會通知視圖層重新渲染頁面。所以如果不是視圖所需要的變量,可以不定義在 data 中,可在外部定義變量或直接掛載在vue實例上,以避免造成資源浪費。
長列表
- 長列表中如果每個item有一個點贊按鈕,點擊後點贊數字+1,此時點贊組件必須是一個單獨引用的組件,才能做到差量數據更新。否則會造成整個列表數據重載。
- 長列表中每個item並不一定需要做成組件,取決於你的業務中是否需要差量更新某一行item的數據,如沒有此類需求則不應該引入大量組件。(點擊item後背景變色,屬於css調整,沒有更新data數據和渲染,不涉及這個問題)
- app端nvue的長列表應該使用list組件,有自動的渲染資源回收機制。vue頁面使用頁面滾動的性能,好於使用scroll-view的區域滾動。uni ui封裝了uList組件,在app-nvue下使用了list組件,在其他環境使用頁面滾動,自動適配,強烈推薦開發者使用,避免自己寫的不好產生性能問題。
- 如需要左右滑動的長列表,請在HBuilderX新建uni-app項目選新聞模板,那是一個標杆實現。自己用swiper和scroll-view做很容易引發性能問題。
減少一次性渲染的節點數量
頁面初始化時,邏輯層如果一次性向視圖層傳遞很大的數據,使視圖層一次性渲染大量節點,可能造成通訊變慢、頁面切換卡頓,所以建議以局部更新頁面的方式渲染頁面。如:服務端返回100條數據,可進行分批加載,一次加載50條,500ms 後進行下一次加載。