组件性能问题
在数据量大的时候，cas CAD er/tree这类的列表加载缓慢，滚动卡顿，操作延迟。
下图是2000条数据的时候：
密密麻麻的节点：@H_ 126 _26@
绚丽多芬的火焰图：
从上面的火焰图可知卡顿的click时间，渲染时间的非常的严重。
影响cascader/tree这类组件性能的主要 原因 ：
一次性加载出所有的dom节点，导致首次加载缓慢 组件中有一个computed属性： checkedValue 。这个变量触发任何一个click事件的时候，都会 改变 这个变量。cascader 源 码当中，会因为这个值的改变触发 render 方法，导致JS执行时间、重绘和 重排 的时间都很长。
解决 方案
既然是 大数据 量导致的，那么我们就控制一次性加载的数据，这个时候自然想到使用虚拟滚动。g IT h ub 搜索下，搜索到了 vue-virtual -s croll-list 组件。
npm install vue-virtual-scroll-list --save
具体用法可以自行查看官网。主要是下面三个参数：
data-key: 配置循环的组件子组件的唯一ID data-source: 数组 data- component : 待循环的组件个人更加喜欢像下面这样的组件设计：
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
/>
</el-select>
显性的子组件和 v-for ，以及直观的 key 值。
优化后的表现
结果显而易见。火焰图不够红火了！不再卡顿。
实现原理
那么它的实现原理 是什么 呢？
下面是一张3d图，表示了数据实际展示的范围。
由此可知，根据滚动容器元素的可视窗口来渲染长列表中的部分数据。 利用 视差和错觉 制作 一份出一份[虚拟]列表，一个虚拟列表由三部分组成：
视窗口 虚拟数据列表（数据展示） 滚动占位区块（底部滚动区它的实现思路：
根据该图可以得到下面这样的 思维 导图：
总结
到此这篇关于vue-virtual-scroll-list虚拟组件实现思路的 文章 就介绍到这了,更多相关vue-virtual-scroll-list虚拟组件实现内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
总结
以上是 为你收集整理的 vue-virtual-scroll-list虚拟组件实现思路详解 全部内容，希望文章能够帮你解决 vue-virtual-scroll-list虚拟组件实现思路详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue-virtual-scroll-list虚拟组件实现思路详解的详细内容...