>[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)