CLI — 数据性能优化
最后更新于：2022-04-02 08:10:17
>[success] # 数据性能优化
~~~
1.写页面的时候经常会遇到大数据渲染导致页面卡顿的问题
~~~
>[danger] ##### 第一种大量的v-for 数据渲染过多导致卡顿
~~~
1.场景：select 框大量数据渲染和其他使用v-for 滚动性质的大量渲染
2.解决方案：'vue-virtual-scroll-list' 可以使用vue这个组件，具体原理他会计算可视区域，只渲染可视区域的数据
~~~
* 案例
~~~
~~~
>[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)
';