效能優化是每個專案都必須重視的，所以在使用uniapp中，將一些效能優化的點記錄下來，在寫程式碼的時候需要注意一下：

一、優化資料更新

　　在 uni-app 中，定義在 data 裡面的資料每次變化時都會通知檢視層重新渲染頁面。所以如果不是檢視所需要的變數，可以不定義在 data 中，可在外部定義變數或直接掛載在vue例項上，以避免造成資源浪費。

二、長列表優化

1、長列表中如果每個item有一個點贊按鈕，點選後點贊數字+1，此時點贊元件必須是一個單獨引用的元件，才能做到差量資料更新，否則會造成整個列表資料過載。

2、長列表中每個item並不一定需要做成元件，取決於你的業務中是否需要差量更新某一行item的資料，如沒有此類需求則不應該引入大量元件

3、單個元件中存在大量資料時（比如長列表），在App和小程式端資料更新時會消耗較多時間，建議使用元件對資料進行分頁，將變更限制更小範圍。可以參考：長列表優化示例

　　我們看一下這個優化示例的核心思路：

　　優化前：

// bad
<view>
　　<my-item v-for="(item,index) in list" :key="index" :icon="item.icon" :title="item.title" :detail="item.detail"></my-item>
</view>
 

　　下面是優化後的核心內容：

// good
<view>
　　<my-section v-for="(item,index) in section" :key="index" :begin="item.begin" :end="item.end"></my-section>
</view>

import mySection from './my-section.vue'

// my-section.vue
<view>
　　<my-item v-for="(item,index) in list" :key="index" :icon="
 
item.icon" :title="item.title" :detail="item.detail"></my-item>
</view>

created() {
　　this.list = list.slice(this.begin, this.end)
}

　　說一下其優化思路就是：將本來在一個元件內的資料，分佈在多個元件內，避免一個元件內的資料量太大導致diff和同步到檢視層耗時太多。

　　比如一個元件內的100條資料，變成了10個元件內的10條資料，將變更限制了再10條一組的資料元件內。

4、app端nvue的長列表應該使用list元件，有自動的渲染資源回收機制。vue頁面使用頁面滾動的效能，好於使用scroll-view的區域滾動。uni ui封裝了uList元件，在app-nvue下使用了list元件，在其他環境使用頁面滾動，自動適配，強烈推薦開發者使用，避免自己寫的不好產生效能問題。

5、如需要左右滑動的長列表，請在HBuilderX新建uni-app專案選新聞模板，那是一個標杆實現。自己用swiper和scroll-view做很容易引發效能問題

三、減少一次性渲染的節點數量

　　頁面初始化時，邏輯層如果一次性向檢視層傳遞很大的資料，使檢視層一次性渲染大量節點，可能造成通訊變慢、頁面切換卡頓，所以建議以區域性更新頁面的方式渲染頁面。如：服務端返回100條資料，可進行分批載入，一次載入50條，500ms 後進行下一次載入。