尤雨溪都打赏的虚拟列表组件，到底有多强

尤雨溪都打赏的虚拟列表组件，到底有多强？

在前端开发中，性能优化永远是绕不开的主题。今天就带你看看 vue-virtual-scroller，一款让你滚动页面时流畅得像火箭一样的 Vue 组件。本文将简单介绍这个组件的主要功能、技术特点，并附上几句调侃让你轻松理解。

软件简介

vue-virtual-scroller 是一个针对大数据列表展示的 Vue 组件。它的核心功能就是虚拟化滚动，这意味着即便你的列表项有成千上万条，它也能以飞快的速度流畅展示，不会拖慢页面。

简单来说，如果你的页面像个吃饱了的蜗牛，这个组件就是专门帮你装上涡轮增压的。

这个项目不仅有超过 9.4k 的 GitHub 星星，还有大约 900 次 fork，被 21,000+ 个项目使用。简单粗暴的总结就是——大家都在用！

 

 

 

主要特点

1. 快速滚动

这个组件最大的特点就是快。无论数据多大，它都能处理得游刃有余。如果你做了个超长列表，结果卡到爆，那就该考虑它了。

2. Vue 2 & Vue 3 全覆盖

不论你是 Vue 2 的老粉丝，还是 Vue 3 的新追随者，vue-virtual-scroller 都支持，真的是面面俱到。

3. 自定义强大

它不仅支持动态的项大小，还可以轻松配置组件和容器的高度，甚至还能滚动到特定项。总之，想怎么滚就怎么滚，体验随你定。

4. 高性能数据展示

在处理超长列表或表格时，它能显著减少 DOM 操作，让你的页面秒变丝滑。这可不光是炫技，而是对用户体验的实打实提升。

技术架构

vue-virtual-scroller 使用 Vue.js 作为主框架，Vue 的简洁和灵活性正好契合了虚拟滚动的需求。为了保证性能，它采用了虚拟化技术，只渲染当前可见的部分数据，未显示的数据则在视图外 "休息"，等你滚到的时候才会被渲染。

从架构设计上看，组件简单易用但功能强大。你可以通过配置项实现复杂的滚动行为，甚至支持自定义的事件监听，方便开发者更灵活地处理业务逻辑。

 

快速上手

想要快速使用它？没问题，几行代码就能搞定！只需安装它的 npm 包：

npm install vue-virtual-scroller

然后在组件中引入并使用：

<template><virtual-scroller :items="myItems" :item-height="100"><template #default="{ item }"><div>{{ item.name }}</div></template></virtual-scroller>
</template><script>
import { VirtualScroller } from 'vue-virtual-scroller';export default {components: { VirtualScroller },data() {return {myItems: Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }))};}
};
</script>

这段代码中，你可以快速生成一个 1000 条数据的滚动列表，并通过 vue-virtual-scroller 实现超流畅的体验。

演示

如果你想实际看看它有多流畅，可以访问它的(https://vue-virtual-scroller-demo.netlify.app)。看完了估计你会惊呼：哇塞！这也太顺滑了吧！

结语

vue-virtual-scroller 让前端滚动变得更轻松更愉快，再也不用担心大数据量拖慢页面了。不管是简单列表还是复杂表格，它都能轻松应对。如果你还在为页面卡顿发愁，不妨试试这款虚拟滚动组件，保准让你的页面“飞”起来。

记得点赞加关注，我是你的前端朋友，天天给你带来好玩又实用的技术干货！

推荐阅读

• • Gin-vue-admin：全栈开发神器

• • LG-SOAR：翱翔吧，开发者的利器

---

欢迎关注我的公众号“前端新视野brizer”，原创技术文，开源好工具第一时间推送。