vue-virtual-scroll-list虚拟组件实现思路详解

更新时间：2023年02月18日 11:59:06 作者：砂糖橘加盐

这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

组件性能问题

在数据量大的时候，cascader/tree这类的列表加载缓慢，滚动卡顿，操作延迟。

下图是2000条数据的时候：

密密麻麻的节点：

绚丽多芬的火焰图：

从上面的火焰图可知卡顿的click时间，渲染时间的非常的严重。

影响cascader/tree这类组件性能的主要原因：

一次性加载出所有的dom节点，导致首次加载缓慢
组件中有一个computed属性：checkedValue。这个变量触发任何一个click事件的时候，都会改变这个变量。cascader源码当中，会因为这个值的改变触发render方法，导致JS执行时间、重绘和重排的时间都很长。

解决方案

既然是大数据量导致的，那么我们就控制一次性加载的数据，这个时候自然想到使用虚拟滚动。github搜索下，搜索到了vue-virtual-scroll-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虚拟组件实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue2.0项目集成Cesium的实现方法
这篇文章主要介绍了vue2.0项目集成Cesium的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
使用 Vue 3 的 createApp方法初始化应用的基本步骤
createApp 是 Vue 3 引入的全局 API,用于创建一个应用实例,这篇文章主要介绍了如何使用 Vue 3 的 createApp方法初始化应用,通过 createApp 方法,我们从 Vue 3 的基本初始化开始,扩展到插件的应用、多个应用实例的创建等,需要的朋友可以参考下
2024-05-05
vue+express生成token方式
这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue3.0 的 Composition API 的使用示例
这篇文章主要介绍了vue3.0 的 Composition API 的使用示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-10-10
vue实现全局组件自动注册,无需再单独引用
这篇文章主要介绍了vue实现全局组件自动注册，无需再单独引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue布置导航守卫获取用户信息
这篇文章主要为大家介绍了Vue布置导航守卫获取用户信息，有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
深入理解vue中的$set
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue的路由及路由钩子函数的实现
这篇文章主要介绍了Vue的路由及路由钩子函数的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
浅谈vue中改elementUI默认样式引发的static与assets的区别
下面小编就为大家分享一篇浅谈vue中改elementUI默认样式引发的static 与assets的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
程序员应该知道的vuex冷门小技巧(超好用)
Vue基本用法很容易上手,但是有很多优化的写法你就不一定知道了,下面这篇文章主要给大家介绍了关于程序员应该知道的vuex冷门小技巧的相关资料,需要的朋友可以参考下
2022-05-05