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虚拟组件实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3实现tabs导航栏点击每个导航项有下划线动画效果
这篇文章主要介绍了vue3实现tabs导航栏点击每个导航项有下划线动画效果,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
vue-calendar-component 封装多日期选择组件的实例代码
这篇文章主要介绍了vue-calendar-component 封装多日期选择组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
vue中EventBus的使用教程详解
在Vue中,使用EventBus可以实现组件间的通信,如何使用EventBus？都需要做哪些配置呢？他的注意事项是什么呢？下面就跟随小编一起学习一下吧
2024-02-02
教你如何在 Nuxt 3 中使用 wavesurfer.js
这篇文章主要介绍了如何在 Nuxt 3 中使用 wavesurfer.js,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vuei18n 在数组中的使用方式
这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3清空reactive的四种方式
本文主要介绍了vue3清空reactive的四种方式,包含使用 Object.assign,使用 Object.keys 和 for...in 循环,使用 delete 操作符和重新赋值4种,感兴趣的可以了解一下
2024-03-03
vue ajax 拦截原理与实现方法示例
这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下
2019-11-11
vue项目如何刷新当前页面的方法
这篇文章主要介绍了vue项目如何刷新当前页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue2.x 的双向绑定原理及实现
这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容
2021-09-09
Vue解析带html标签的字符串为dom的实例
今天小编就为大家分享一篇Vue解析带html标签的字符串为dom的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11