Vue渲染数据量过大，页面渲染卡

方案：

减少数据，减少demo节点，虚拟列表

我在处理的使用使用了两个方案，一个是减少demo节点（组件化）拆分；虚拟列表

我在进行排查问题的时候发现问题的所在是因为页面html有1800多行而且数据量过大，导致前端渲染页面的时候过卡，页面中的控件也比较多还做了双向绑定。最大的问题是需求中必须是可编辑，并且要支持联动编辑。那么既然这样的话更不用说了，一个都卡的不行不行的，联动肯定就炸了。

解决思路：

最开始与同事商量准备将所有可编辑的部分改为静态，然后再数据后边添加一个修改的字眼，点击的时候动态生成一个控件元素，这样的话就不会有那么多控件绑定了。确实是个好思路，但是回过头来一看结构过于复杂，整个人又懵了

最后还是通过拆分，不停的拆分，提升了很大的优化，但是此时还有一个问题就是数组多了还是会卡，那么我又进行了一个虚拟列表操作，这里我采用了vue-virtual-scroll-list，配合了我的组件拆分，控制横向滚动的数量。

安装：

1. 安装 vue-virtual-scroll-list

npm install vue-virtual-scroll-list --save

2.  引入下载好的组件    记得局部注册一下组件

import virtualList from 'vue-virtual-scroll-list'

最后的最后差不多就是这样了。

初来乍到，请多关照，高手勿喷