>[success] # 數據性能優化 ~~~ 1.寫頁面的時候經常會遇到大數據渲染導致頁面卡頓的問題 ~~~ >[danger] ##### 第一種大量的v-for 數據渲染過多導致卡頓 ~~~ 1.場景：select 框大量數據渲染和其他使用v-for 滾動性質的大量渲染 2.解決方案：'vue-virtual-scroll-list' 可以使用vue這個組件，具體原理他會計算可視區域，只渲染可視區域的數據 ~~~ * 案例 ~~~ <Select v-model="selectData" style="width:200px"> <virtual-list :size="30" :remain="6"> <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option> </virtual-list> </Select> ~~~ >[danger] ##### 當表單有大量數據的時候 ~~~ 1.可以將每一個form 驗證項目封裝成一個單獨的form驗證 ~~~ >[danger] ##### 當渲染的table 有大量數據的時候 ~~~ 1.簡單粗暴的方法使用分頁 2.使用vue組件'vue-bigdata-table' ~~~ >[danger] ##### 數據量大 ~~~ 1.當數據綁在vue 時候，vue會給你屬性增加get 或者 set 方法用來監聽更新 ，如果不想讓vue幫助這樣的重復渲染可以使用'Object.preventExtensions' 2.當然這種使用需要你手動去觸發數據和視圖的變更，vue強制視圖變更 的方法'$forceUpdate' ~~~ [Object.preventExtensions](https://blog.csdn.net/weixin_33777877/article/details/93175799) [$forceUpdate](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E5%BC%BA%E5%88%B6%E6%9B%B4%E6%96%B0)