1. 从真实痛点出发为什么我们需要虚拟滚动如果你做过前端开发尤其是处理过数据量稍大一些的后台管理系统、数据报表或者类似“城市选择器”这种包含成千上万条数据的组件那你一定对“页面卡顿”这四个字深恶痛绝。我印象最深的一次是做一个供应商管理模块一个表格需要展示近万条带有多级联动的数据。当时直接用了 Element UI 的 Table 组件结果页面一打开浏览器直接“转圈”十几秒然后整个标签页都变得异常卡顿滚动一下鼠标都要等半天才能响应。打开 Chrome 的性能面板一看好家伙几万个 DOM 节点挂在树上内存占用飙升重绘和回流触发的频率高得吓人。这就是典型的“暴力渲染”带来的恶果。问题的根源在于浏览器的渲染机制。每一个列表项或表格行无论是否在可视区域内都会被创建为真实的 DOM 节点。当数据量达到数千甚至上万时DOM 树会变得极其臃肿。这会导致几个致命问题首屏加载时间极长因为要生成所有节点、内存占用巨大每个节点都占用内存、滚动和交互卡顿频繁的布局计算和重绘。用户看到的可能只是一个 10 行高的小窗口但浏览器却在背后默默承受着渲染一万行的压力。这时候“虚拟滚动”技术就成为了救星。它的核心思想非常直观只渲染用户看得见的部分。你可以把它想象成一个拿着望远镜看长卷画的人望远镜的镜筒就是浏览器的可视区域他只需要看清当前镜筒对准的那一小部分画面即可而不需要把整幅长达百米的画卷一次性全部展开铺在面前。技术上虚拟滚动通过动态计算可视区域只创建和渲染位于该区域内的 DOM 节点对于区域外的节点则用等高的空白元素或称占位符进行填充从而保持滚动条的总高度与实际数据量相符。这样无论数据源有一千条还是一百万条实际需要渲染和管理的 DOM 节点数量仅仅等于一屏能展示的数量通常几十到几百个性能瓶颈迎刃而解。在 Vue 生态中要实现虚拟滚动我们通常有几个选择一是自己从头实现这需要对滚动监听、位置计算、动态渲染有很深的理解成本较高二是使用一些专门的虚拟滚动库如vue-virtual-scroller三是寻找本身就集成了虚拟滚动功能的 UI 组件库。而vxe-table正是第三种选择中的佼佼者。它不仅是一个功能强大的表格组件更将虚拟滚动的能力深度集成到了表格Grid和列表List中甚至支持了更复杂的树形结构Tree的虚拟滚动。这对于需要处理海量数据同时又要求复杂交互的前端应用来说是一个极具吸引力的解决方案。2. vxe-table 虚拟滚动能力全景图不止于表格很多开发者第一次接触vxe-table是因为它的表格功能但它的虚拟滚动体系实际上是一个更广义的“虚拟渲染”解决方案覆盖了多种数据展示形态。理解它的能力边界能帮助我们在合适的场景选择正确的组件。2.1 虚拟列表超长列表的终极优化方案虚拟列表是虚拟滚动最经典的应用场景。vxe-table通过vxe-list组件提供了开箱即用的虚拟列表支持。它的适用场景非常广泛聊天记录/消息流需要无限加载的历史消息。日志查看器动辄几万行的系统或操作日志。大型选择器比如全国城市列表、公司员工列表等。时间线或动态列表社交媒体动态、新闻资讯流。与普通列表渲染相比虚拟列表的核心优势在于其恒定的渲染开销。假设你的可视区域高度为 500px每个列表项高度为 50px那么无论数据源有多少条同时存在于 DOM 中的列表项最多只有500 / 50 10个上下可能多渲染几个作为缓冲。vxe-list会自动处理滚动位置计算、动态渲染和滚动条模拟你只需要像写普通列表一样提供数据和模板即可。2.2 虚拟树处理海量层级数据的利器树形结构的数据展示如组织架构、文件系统、分类目录在数据量大时同样面临性能问题。传统的树组件展开一个节点就会递归渲染其所有子节点当层级深、子节点多时性能会急剧下降。vxe-table的vxe-tree组件支持虚拟滚动完美解决了这个问题。它的“虚拟”体现在纵向深度和横向广度两个维度纵向虚拟并非一次性渲染整棵树的所有节点而是只渲染当前滚动视窗内的节点。即使你有十万个节点展开一个包含五千个子节点的父节点渲染压力也仅限于一屏。横向虚拟可选对于超宽的树节点内容比如很长的文本可以结合横向滚动进行虚拟渲染。这对于像“全公司组织架构图”可能数万人或“大型产品分类树”这样的场景是革命性的。你不再需要担心全部展开会导致浏览器崩溃用户可以自由地展开/折叠、滚动浏览。2.3 虚拟表格大数据表格的标配这是vxe-table的看家本领。vxe-grid组件同时支持纵向虚拟滚动和横向虚拟滚动。纵向虚拟滚动解决行数据量大的问题。这是最常见的需求例如展示万行级别的交易记录、用户清单。横向虚拟滚动解决列数量多的问题。当表格有上百列时横向虚拟滚动可以保证只有可视区域内的列被真实渲染左右滚动流畅。更强大的是它可以同时开启纵向和横向虚拟滚动以应对“既长又宽”的超大型数据表格。在金融、电信、物联网等领域的实时监控大屏或数据查询平台中这种能力至关重要。2.4 虚拟滚动的核心参数与配置逻辑无论使用上述哪种组件开启虚拟滚动的核心都是几个关键配置。理解它们才能用好虚拟滚动。template !-- 虚拟列表示例 -- vxe-list height400 :datahugeList :virtual-scroll{ itemSize: 50 } template #default{ items } div v-foritem in items :keyitem.id classlist-item {{ item.name }} /div /template /vxe-list !-- 虚拟表格示例 -- vxe-grid border height500 :columnscolumns :datahugeTableData :scroll-x{ gt: 50 } !-- 当列数大于50时启用横向虚拟滚动 -- :scroll-y{ gt: 100 } !-- 当行数大于100时启用纵向虚拟滚动 -- / /templateheight/max-height这是触发虚拟滚动的必要条件。你必须为组件设定一个固定高度或最大高度这样组件才能计算出可视区域的范围。很多新手踩的第一个坑就是忘记设置高度导致虚拟滚动不生效。virtual-scroll(List/Tree) 或scroll-x/scroll-y(Grid)用于启用和配置虚拟滚动。itemSize(List): 告诉组件每个列表项的预估高度单位px。这个值用于计算总滚动高度和定位。如果项目高度不固定可以设置为null但性能会略有损耗因为需要动态测量。gt(Grid): 一个非常实用的阈值配置。例如{ gt: 100 }表示当数据行数大于100时才启用虚拟滚动。对于小数据量直接渲染反而更简单高效。这个设计避免了“杀鸡用牛刀”让配置更智能。oSize(List/Tree)指渲染缓冲区即视窗上方和下方额外渲染的不可见项目数。适当调大如默认值可能为5可以让快速滚动时过渡更平滑但会轻微增加DOM节点数。需要根据项目高度和滚动速度权衡。注意itemSize的设定至关重要。如果设定值远小于实际项目高度会导致滚动条滑块过大滚动过快如果设定值远大于实际高度则滚动条滑块过小滚动缓慢。对于高度不固定的情况建议先给一个平均值或者使用动态计算高度的方法。3. 实战集成在 Vue 3 项目中一步步引入 vxe-table 虚拟滚动理论说再多不如动手跑一遍。我们以一个 Vue 3 Vite 的项目为例演示如何集成vxe-table并使用其虚拟滚动功能。3.1 环境准备与安装首先创建一个新的 Vite 项目或进入你的现有项目。# 创建Vue项目如果尚未创建 npm create vuelatest my-vxe-app cd my-vxe-app npm install # 安装 vxe-table 核心库及其配套的组件样式、图标和工具库 npm install xe-utils vxe-tablenext这里安装的是vxe-tablenext即支持 Vue 3 的版本。xe-utils是其内部依赖的工具函数库。3.2 全局引入与样式配置虽然vxe-table支持按需引入以优化包体积但对于新手或中型以上项目全局引入更为方便。在main.js或main.ts中import { createApp } from vue import App from ./App.vue // 1. 引入 VXETable 核心 import VXETable from vxe-table // 2. 引入组件样式主题 import vxe-table/lib/style.css // 3. 可选引入图标库表格功能图标需要 import vxe-table/lib/icon.css const app createApp(App) // 全局注册 app.use(VXETable) app.mount(#app)3.3 构建一个支持虚拟滚动的超大数据表格假设我们有一个用户交易记录表格数据量在1万条以上包含ID、时间、用户、金额、状态等字段。步骤一定义表格列和数据模拟在组件中我们先定义列结构和模拟大量数据。template div classvirtual-table-demo vxe-grid refgridRef v-bindgridOptions/vxe-grid /div /template script setup import { ref, reactive } from vue // 模拟生成1万条数据 const mockData () { const data [] for (let i 0; i 10000; i) { data.push({ id: i 1, tradeTime: 2023-10-${String(Math.floor(Math.random() * 30) 1).padStart(2, 0)} 14:30:${String(i % 60).padStart(2, 0)}, userName: 用户${Math.floor(Math.random() * 9000) 1000}, amount: (Math.random() * 10000).toFixed(2), status: [成功, 处理中, 失败][Math.floor(Math.random() * 3)] }) } return data } const tableData ref(mockData()) // 定义表格列 const tableColumns reactive([ { type: seq, width: 60, title: 序号, fixed: left }, // 固定左侧的序列号列 { field: id, title: 交易ID, width: 120, sortable: true }, { field: tradeTime, title: 交易时间, width: 180, sortable: true }, { field: userName, title: 用户, width: 150 }, { field: amount, title: 金额(元), width: 130, align: right, sortable: true }, { field: status, title: 状态, width: 100, filters: [{ label: 成功, value: 成功 }, { label: 失败, value: 失败 }] }, // ... 可以继续添加更多列测试横向虚拟滚动 { field: remark, title: 备注, width: 300, showOverflow: true } // 长文本列 ]) // 定义表格配置项 const gridOptions reactive({ border: true, // 显示边框 resizable: true, // 允许调整列宽 showOverflow: true, // 内容超出时显示省略号 height: 600, // !!! 关键固定高度触发虚拟滚动 columns: tableColumns, data: tableData, scrollY: { gt: 50 }, // 行数大于50时启用纵向虚拟滚动 scrollX: { gt: 10 } // 列数大于10时启用横向虚拟滚动本例列数少可能不触发仅为演示 }) /script style scoped .virtual-table-demo { padding: 20px; } /* 可以自定义行高、单元格样式等 */ /style关键点解析height: 600这是灵魂配置。没有固定高度虚拟滚动就无法计算可视区域会退化为全量渲染。scrollY: { gt: 50 }智能阈值。只有当数据行数超过50行时才启动纵向虚拟滚动。对于少于50行的表格直接渲染性能更好。你可以根据实际情况调整这个阈值。scrollX: { gt: 10 }同理用于控制横向虚拟滚动的触发条件。fixed: left注意在虚拟滚动的表格中固定列的实现机制与普通表格不同。vxe-table能很好地处理固定列与虚拟滚动的兼容问题。运行项目你会发现即使有1万行数据表格的渲染速度、滚动流畅度都与渲染100行数据时几乎没有区别。打开浏览器的开发者工具在“元素”面板中观察滚动时只有可视区域内的tr元素在动态创建和销毁DOM 节点数始终保持在一个很低的水平。3.4 集成虚拟列表以聊天记录为例列表的使用比表格更简单。我们模拟一个聊天记录页面。template div classchat-demo div classchat-header群聊记录 (共{{ messageList.length }}条)/div !-- 虚拟列表核心组件 -- vxe-list reflistRef classchat-list :datamessageList :virtual-scroll{ itemSize: 80, oSize: 8 } height500px scrollhandleListScroll template #default{ items } div v-foritem in items :keyitem.id classmessage-item div classavatar{{ item.sender.charAt(0) }}/div div classcontent div classsender{{ item.sender }} span classtime{{ item.time }}/span/div div classtext{{ item.text }}/div /div /div /template /vxe-list div classinput-area input v-modelnewMessage keyup.entersendMessage placeholder输入消息... / button clicksendMessage发送/button /div /div /template script setup import { ref, onMounted } from vue // 模拟初始聊天记录 const generateMessages (count) { const senders [张三, 李四, 王五, 赵六, 小七] const messages [] for (let i 0; i count; i) { const sender senders[Math.floor(Math.random() * senders.length)] messages.push({ id: i 1, sender, time: 10:${String(i % 60).padStart(2, 0)}, text: 这是第${i 1}条模拟聊天记录来自${sender}。虚拟滚动确保了流畅的浏览体验。.slice(0, 50 Math.random() * 50) }) } return messages } const messageList ref(generateMessages(1000)) // 1000条记录 const newMessage ref() const listRef ref() // 发送新消息添加到顶部模拟最新消息 const sendMessage () { if (!newMessage.value.trim()) return const newMsg { id: messageList.value.length 1, sender: 我, time: 刚刚, text: newMessage.value } messageList.value.unshift(newMsg) // 添加到头部 newMessage.value // 可选发送后自动滚动到最新位置顶部 // 对于虚拟列表直接设置 scrollTop 为 0 即可 setTimeout(() { if (listRef.value) { listRef.value.scrollTo(0) } }, 50) } // 处理滚动事件可用于实现无限加载加载更早的历史记录 const handleListScroll ({ scrollTop, scrollTopMax }) { // 滚动到底部附近时加载更多历史消息 if (scrollTop scrollTopMax - 50) { // 模拟异步加载 setTimeout(() { const moreMsgs generateMessages(20) // 注意虚拟列表对数据变化是响应的直接 push 即可 messageList.value.push(...moreMsgs.map(msg ({...msg, id: messageList.value.length msg.id}))) }, 500) } } onMounted(() { // 组件挂载后可以滚动到底部查看最新消息 setTimeout(() { if (listRef.value) { listRef.value.scrollTo(null, max) // 滚动到底部 } }, 100) }) /script style scoped .chat-demo { width: 400px; margin: 0 auto; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .chat-header { padding: 12px; background: #f0f0f0; font-weight: bold; text-align: center; } .chat-list { background: #fafafa; } .message-item { display: flex; padding: 12px; border-bottom: 1px solid #eee; min-height: 80px; /* 与 itemSize 对应 */ box-sizing: border-box; } .message-item .avatar { width: 36px; height: 36px; border-radius: 50%; background: #409eff; color: white; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .message-item .content { flex: 1; } .message-item .sender { font-weight: bold; margin-bottom: 4px; } .message-item .sender .time { font-weight: normal; color: #999; font-size: 0.9em; margin-left: 10px; } .message-item .text { color: #333; line-height: 1.5; } .input-area { display: flex; padding: 12px; border-top: 1px solid #ddd; } .input-area input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-right: 8px; } .input-area button { padding: 8px 16px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer; } /style关键点解析:virtual-scroll{ itemSize: 80, oSize: 8 }这里我们预估每条消息的高度为80px通过CSS的min-height保证。oSize设置为8意味着会在可视区域上下各多渲染8条作为缓冲使得快速滚动时不会出现白屏。height500px同样必须设置固定高度。scroll事件我们利用它来实现滚动到底部时自动加载更多历史消息无限滚动。scrollTopMax属性非常有用它代表了最大可滚动距离。数据响应性vxe-list完全响应data的变化。无论是unshift新消息、push加载历史还是splice删除消息列表都会自动更新并保持正确的滚动位置。这是它比许多手动实现的虚拟滚动方案更优秀的地方。4. 进阶技巧与避坑指南让虚拟滚动更稳健高效在实际项目中使用虚拟滚动会遇到一些特定场景下的挑战。下面分享一些我踩过坑后总结的经验。4.1 动态高度与自适应内容上面的例子我们假设了固定高度itemSize。但现实中列表项高度可能不固定比如包含折叠文本、图片加载后高度变化等。vxe-table的虚拟列表和表格对此有支持。方案一使用itemSize: null将itemSize设为null组件会使用一个默认的预估高度并在渲染后动态测量实际高度来更新滚动条。这能解决高度不固定的问题但有两个代价性能损耗需要额外的测量和计算。滚动条跳动在初始渲染或快速滚动时如果预估高度和实际高度差异大滚动条长度会突然变化导致体验不佳。方案二使用scroll-to-row与自定义测量推荐对于表格更稳妥的做法是结合业务逻辑。如果行高变化有规律比如展开详情行可以通过:row-config{ height: 80 }设置基础行高对于展开的行则通过计算属性动态返回一个更大的高度但这需要更复杂的逻辑。实操心得对于聊天列表这种高度差异不大的场景设置一个稍大于平均值的itemSize如100px然后通过CSS控制内容不超出是简单有效的方案。对于高度完全不可预测的复杂列表可能需要评估是否真的适合用虚拟滚动或者考虑分页。4.2 与复杂功能排序、筛选、合并的兼容性虚拟滚动只负责渲染优化vxe-table的表格功能如排序、筛选、合并单元格等都能正常工作。但需要注意排序/筛选后数据源会变化虚拟滚动会自动重新计算。但滚动位置通常会重置到顶部这是符合预期的行为。固定列在开启横向虚拟滚动时固定列fixed: left或right的实现是独立的它们会脱离横向虚拟滚动区域始终显示。确保固定列的宽度总和不要超过表格宽度否则会出现布局问题。合并单元格虚拟滚动区域内的合并单元格渲染是正常的。但如果合并跨越了虚拟滚动的“区块”边界可能会出现渲染异常。建议在设计表格时避免在可能启用虚拟滚动的大数据量表格中使用跨越多行的复杂合并。4.3 性能监控与调试如何确认虚拟滚动真的在起作用并且性能良好Chrome DevTools Performance 面板录制滚动操作查看Layout,Recalc Style,Paint等耗时。虚拟滚动下这些耗时应该非常短且平稳。Chrome DevTools Elements 面板观察 DOM 节点数。滚动时对应的tr或div节点应该只有可视区域内的那些在动态变化总数保持低位。vxe-table自带的性能提示在开发模式下如果配置不当如未设置高度控制台可能会有警告提示。4.4 常见问题排查问题一设置了高度但滚动条很奇怪或者滚动行为异常。检查点确认父容器没有overflow,transform,position: fixed等可能影响滚动容器计算的样式。虚拟滚动需要基于你设置的height的容器进行绝对定位计算。检查点确认itemSize设置是否合理。与实际平均高度相差过大会导致滚动条比例失调。可以暂时关闭虚拟滚动对比一下滚动条总长度。问题二快速滚动时出现短暂白屏。解决方案适当增大oSize缓冲区大小比如从默认的5调到10或15。这会让组件提前渲染更多不可见项目以应对快速滚动。但这会轻微增加DOM节点数需要权衡。解决方案检查单个列表项/表格行的渲染复杂度。如果每个项目内部都有非常复杂的计算或子组件即使只渲染几十个也可能造成卡顿。需要考虑对项目组件本身进行优化如使用v-once,v-memo或简化模板。问题三表格结合分页加载时滚动位置无法保持。场景你滚动到第5000条记录附近然后切换了筛选条件或进行了分页操作数据更新后滚动条跳回了顶部。分析这是预期行为因为数据源发生了根本性变化。如果需要保持“浏览位置”的感觉通常需要结合“无限滚动”模式而不是分页。或者在业务逻辑上记录上次查看的ID数据更新后自动滚动到该ID附近。4.5 横向虚拟滚动的特殊注意事项横向虚拟滚动主要用于列特别多的表格。除了设置scroll-x: { gt: N }还需注意列宽设置建议为每一列设置明确的width这样表格能准确计算总宽度和横向滚动条。固定列左右固定列会始终显示不参与横向虚拟滚动。性能同时开启横纵虚拟滚动时对滚动的计算会更复杂。如果性能要求极致可以评估是否真的需要同时开启或者能否通过设计如隐藏非核心列来减少列数。5. 虚拟滚动的边界何时该用何时不该用虚拟滚动是性能优化的利器但并非银弹。在以下场景它可能不是最佳选择甚至带来额外复杂度数据量很小 100条此时虚拟滚动的计算开销可能超过直接渲染的开销。直接渲染更简单功能兼容性也更好。利用scroll-y: { gt: 100 }这样的阈值配置可以自动规避此问题。需要极高的交互频率如果用户需要对表格进行非常频繁的、非滚动的操作如每行都有复杂的编辑、拖拽虚拟滚动带来的DOM回收与重建可能会与这些操作产生冲突增加状态管理的复杂度。行高极端不规则且变化频繁如果每一行的高度都完全无法预估且差异巨大比如一个富文本编辑器列表动态测量会导致滚动条不断跳动体验很差。这种情况下分页或“无限滚动动态高度缓存”可能是更复杂的替代方案。对可访问性要求极高虚拟滚动会破坏原生DOM的顺序和连续性可能对屏幕阅读器等辅助工具不友好。虽然现代虚拟滚动库都在努力改善但在要求严格的无障碍场景下需要充分测试。我的个人经验是对于后台管理系统、数据中台、日志分析等以“查看”为主数据量常在数百到数万行之间的场景vxe-table的虚拟滚动是提升体验的必选项。它极大地提升了应用的响应速度和专业感。对于更复杂的前端应用如表单密集的表格或高度动态的内容则需要结合具体交互进行更细致的设计和测试。最后再分享一个调试小技巧在开发初期可以先将虚拟滚动的阈值设得非常低如gt: 0强制开启然后观察控制台警告和性能表现这能帮你快速发现配置问题。稳定后再调整到合理的生产环境阈值。