Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2

最新推荐文章于 2024-05-22 12:07:12 发布
最新推荐文章于 2024-05-22 12:07:12 发布
阅读量3.6k 收藏 11
点赞数
分类专栏： 前端 html 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67401660/article/details/123368075
版权
本文详细介绍了在Vue项目中，如何利用vue-virtual-scroller解决大量数据渲染导致的性能问题。通过讲解vue2和vue3的使用步骤，包括安装、引入、配置及效果展示，阐述了该插件如何实现只渲染可视区域的数据，提升用户体验。
摘要由CSDN通过智能技术生成

Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2

一、遇到的问题

最近在做的一个小工具中需要解决一个展示巨量数据列表的问题，数据有 8万 多条。
刚开始我是直接让它渲染的，结果用了 60 秒之多，我以为是数据处理耗时多，经过排查，发现是 dom 渲染用时长，数据处理其实只用了不到 100ms，如下图：

请添加图片描述

二、解决方案 vue-virtual-scroller

所以目前主要需要解决的就是如何能流畅展示这么多数据的问题，搜了下，搜到 vue-virtual-scroller 这个插件。

它主要能实现的功能是，能处理巨量列表的展示。原理是它只把展示给用户的那部分渲染出来，比如滚到上面的 dom 就回收掉。这个跟 iOS 的 ReuseableCell 很像，那个是复用的。

三、vue2 使用 vue-virtual-sc

最低0.47元/天 解锁文章
m0_67401660
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
RecycleScroller:vue大数据滚动组件
05-12
demo 在线demo: 博客链接: 组件参数： 参数 说明 类型 必填 默认值 list 需要渲染的数据 Array 是 - itemKey 数组的唯一标识字段，可以很大程度提升渲染性能 String 是 - itemHeight 每条数据的高度 Number 否 40 viewHeight 可视区域高度 Number 否 600 实现原理： 最外层recycle-scroller节点需要设置一个固定高度，它代表可视区域。 中间层recycle-scroller-holder节点高度为渲染所有数据的总高度，它目的在于撑出recycle-scroller的滚动条。 最内层recycle-scroller-wrapper包裹我们实际渲染的数据，它会预加载上一屏与下一屏的数据，在滚动时进行复用。通过改变recycle-scroller-wrapper的纵向偏移量（translateY的值
vue-virtual-scroller：:high_voltage:大量数据快速滚动
02-08
虚拟虚拟卷轴 快速滚动任意数量的数据| |赞助商目录安装npm install --save vue-virtual-scroller :warning: 现在， vue-virtual-scroller使用在显示时自动刷新自身，以防止显示故障。 这意味着您需要包括vue-...
js-vue-virtual-scroller 来实现列表数据量过大滚动渲染处理
2301_76671906的博客
09-05 1052
vue-virtual-scroller是Vue.js 的虚拟滚动库，它可以用于处理大型列表或大量数据的渲染。通过只渲染可见区域内的元素，而不是整个列表，可以提高性能并减少内存占用。
【vue-treeselect+el-table】数据量大的时候懒加载，数据回显，输入框绑值，末级节点不要前面的箭头等问题详解
花椒和蕊的博客
07-11 3756
vue-treeselect官网，戳我 最近做了个功能，el-table可编辑表格，有一列是treeselect下拉树，接口数据900多kb，请求花了400毫秒左右，按道理说数据不算很大，但是渲染很慢，一刷新或者刚进页面，有1.89秒的卡顿，并且点击下拉树或者同行其他的el-select下拉，卡顿非常明显。这个列表需要填写上百行数据，不做优化肯定不行的。优化的思路就是懒加载，思路是： 调两次树接口，第一次什么都不传或者传0，看后端怎么要求，最重要的是拿到的是根节点。如下： 子节点children都为空，只
虚拟列表 vue-virtual-scroller 的使用
最新发布
小秀的博客
05-22 572
【代码】虚拟列表 vue-virtual-scroller 的使用。
vue-virtual-scroller的使用，展示巨量数据，长列表优化，虚拟列表
muzidigbig的博客
08-06 8266
​二、vue-virtual-scroller的使用，长列表优化，虚拟列表，纵想丝滑 对于长列表数据有 10万 多条来说，我们大部分的操作都是： 1.懒加载，分页， 2.Object.freeze 冻结数组取消响应式，因为大多时候都是展示 3.高清图替换成缩略图，因为很多时候长列表的图尺寸都比较小，所以可以用小图来代替 以上能解决大部分的长列表问题，在可以分页的情况下。 但是，还有两个问题未解决，那就是： 1.不能分页的时候怎么办 2.当用户向下滑动加载了很多很多的内容时，可能是1000个10000
vue大数据滚动组件
qq_36259513的博客
11-17 4176
最近在开发项目中遇到一个需求，需要实现一个渲染上千条数据的列表，但如果一次渲染出这么多DOM节点对性能会是很大的消耗。于是上github找了一下相关的优化方案，最终找到一个组件https://github.com/Akryum/vue-virtual-scroller，它能把渲染DOM节点的数量控制在一定范围内，仅仅是渲染当前屏幕所看到的部分DOM节点，从而实现优化。 参考了vue-virtu...
Vue虚拟列表插件vue-virtual-scroller之中文文档
热门推荐
huangpb的博客
05-21 1万+
是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据，例如列表、表格、瀑布流等，并且支持水平和垂直滚动，也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富，可以让开发者轻松地自定义滚动逻辑和交互效果。
Vue Virtual Scroller
2301_80106870的博客
10-29 511
Vue Virtual Scroller 是一个用于优化长列表的 Vue.js 组件，它实现了虚拟滚动的功能。通过只渲染当前可见的列表项，而不是整个列表，它可以提高性能并减少内存消耗。
虚拟滚动-Vue 展示巨量数据，vue-virtual-scroller 使用说明 vue3 vue2
細水、長流√的专栏
09-10 2350
所有的操作都在官方 API 文档中有，我只是摘取了部分，哪里不太明白的话可以去看原文档。这是我做的另一个electron工具里的内容。
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vuerecyclerviewVue超大数据列表解决方案
08-08
vue-recyclerview：Vue 超大数据列表解决方案
vue-scroller 页面滚动相关总结
01-07
1 下载 npm i vue-scroller 2 引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueScroller) 3 使用 1）添加上拉加载方法和下拉刷新方法 2）加载完成调用 相应的方法结束动画，不然的话会一直显示动画 .wrapper{ width: 100vw; height:88vh!important; margin-top:12vh; border: 1px solid darkblue; } /**3）css部分 我的解决方案是： ①
vue-virtual-scroll-grid：Vue 3的可重用组件，以高效的方式将具有大量项目（例如1000多个项目）的列表呈现为网格
02-15
安装npm istall vue-virtual-scroll-grid枫树< template> <!-- length: The number of items in the list. --> <!-- pageSize: The number of items in a page from the item provider (e.g. a backend API...
vue-scroller
04-09
vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件
vue element表格某一列内容过多，超出省略号显示
_NIXIAKF的博客
01-29 3035
vue element表格某一列内容过多，超出省略号显示
Vue 渲染大量dom卡顿，vue-virtual-scroller 使用说明 vue3 vue2
Noctis99的博客
07-27 2400
vue
Vue Virtual Scroller：高性能滚动解决方案
gitblog_00067的博客
03-20 471
Vue Virtual Scroller：高性能滚动解决方案 项目地址:https://gitcode.com/Akryum/vue-virtual-scroller Vue Virtual Scroller 是一个为 Vue.js 应用程序设计的高效虚拟滚动组件。它允许你在处理大量数据时，只渲染可视区域内的元素，从而显著提高应用性能，尤其是对移动设备而言。 项目简介 Vue Virtual Sc...
使用vue-virtual-scroller遇到的问题
xlk_1996的博客
12-07 4695
使用vue-virtual-scroller途中遇到的问题。
vue3使用vue-virtual-scroller
05-12
Vue Virtual Scroller 是一个 Vue.js 的虚拟滚动列表组件，它可以大大提高列表的性能和渲染速度。在 Vue 3 中，使用 Vue Virtual Scroller 的方法和在 Vue 2 中基本相同。 首先，你需要安装 `vue-virtual-scroller`： ``` npm install vue-virtual-scroller --save ``` 然后在你的 Vue 组件中引入它： ```javascript import { VueVirtualScroller } from 'vue-virtual-scroller' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' export default { components: { VueVirtualScroller }, // ... } ``` 在模板中使用 `vue-virtual-scroller`： ```html <template> <vue-virtual-scroller class="my-list" :items="items" item-height="50"> <template v-slot="{ item }"> <div class="my-item">{{ item }}</div> </template> </vue-virtual-scroller> </template> ``` 其中，`:items` 是一个数组，包含了要渲染的列表项，`item-height` 是每个列表项的高度，`v-slot` 是一个插槽，用于渲染每个列表项。你可以在插槽中使用 `item` 变量来访问每个列表项的数据。 以上就是在 Vue 3 中使用 `vue-virtual-scroller` 的基本方法。你可以根据自己的需求来调整列表项的高度和样式。同时，你也可以根据官方文档的说明来使用其他高级特性，如加载更多、缓存等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值