虚拟列表实现万级数据不卡顿的核心在于只渲染可视区域内的元素，而不是一次性渲染所有数据。以下是实现的关键技术和优化思路：一、核心原理：虚拟滚动（VirtualScrolling）虚拟列表的核心思想是只渲染当前可见区域内的元素，而将不可见的元素从DOM中移除或隐藏，从而大幅减少DOM节点数量，提升性能。二、实现步骤1.计算容器高度和滚动位置获取容器的高度（containerHeight）。监听滚动事件

即使内容极简，也会生成 10 万个真实 DOM 节点，占用几十 MB 内存；滚动时触发频繁 layout + paint，Chrome DevTools 的 Performance 面板里帧率常掉到 5–10 fps，移动端极易闪退。

vue-virtual-scroll-list 的关键参数怎么设才不白屏

它不是“开箱即用就流畅”，keeps 和 estimate-size 设错会导致快速滚动时顶部/底部闪空白，或失去优化效果：

• keeps：表示**始终保留在 DOM 中的节点数**（含缓冲），不是“可视区数量”。设为 20–50 是经验区间；若列表项高度为 60px、容器高 600px，则可视区最多显示 10 条，keeps=30 比较稳妥
• estimate-size：必须是**单个列表项的精确像素高度**（如 60），不能写成 '60px' 或 60.5（浮点会累积误差）；高度不固定时不能用此组件，得换支持动态高度的方案（如 vue-virtual-scroller）
• 务必传 data-key，否则内部复用逻辑失效，滚动时可能错位或重复渲染

子组件里不能依赖内部状态，否则会出问题

vue-virtual-scroll-list 采用就地 patch（in-place patching），即复用已有 DOM 节点、只更新 props，不销毁重建。这意味着：

• 子组件里不能用 v-model 绑定输入框，因为输入值存在 DOM 的 value 属性里，patch 不会重置它，滚动后会出现“上一条数据的输入内容显示在下一条上”
• 不能在 mounted 或 created 里做一次性副作用（如发请求、初始化 canvas），这些钩子不会随数据项滚动而重复触发
• 所有状态必须来自父组件传入的 source 和 index，且每次 render 都应是纯函数式输出

滚动到底部加载更多，@tobottom 为什么总触发两次

这不是 bug，是设计行为：@tobottom 在滚动接近底部（默认距离 100px）时触发，但如果你在回调里同步修改 data-sources，新数据插入后总高度变大，滚动位置未变，导致事件再次满足条件。

解决方法很简单：

• 加防抖：用 setTimeout 或 lodash.debounce 包一层
• 改用 loadmoreoffset 显式设大一点（比如 200），留足缓冲空间
• 更稳妥的做法是监听 scroll 事件自己算：scrollTop + containerHeight >= scrollHeight - 50，再手动触发加载

最易被忽略的一点：虚拟列表撑起滚动条靠的是 height: ${totalItems * itemHeight}px 这个占位 div，所以数据总数必须准确——如果后端分页返回 1000 条但你本地缓存了 999 条，滚动条长度就会短一截，用户永远滚不到底，@tobottom 自然不会触发。

以上就是《虚拟列表实现万级数据不卡顿的核心在于只渲染可视区域内的元素，而不是一次性渲染所有数据。以下是实现的关键技术和优化思路：一、核心原理：虚拟滚动（VirtualScrolling）虚拟列表的核心思想是只渲染当前可见区域内的元素，而将不可见的元素从DOM中移除或隐藏，从而大幅减少DOM节点数量，提升性能。二、实现步骤1.计算容器高度和滚动位置获取容器的高度（containerHeight）。监听滚动事件，获取当前滚动位置（scrollTop）。2.计算可见区域的索引范围根据每个元素的高度（itemHeight），计算出当前可见的起始索引和结束索引：conststartIndex=Math.floor(scrollTop/itemHeight);constendIndex=startIndex+Math.ceil(containerHeight/itemHeight);3.渲染可见区域的元素只渲染startIndex到endIndex之间的元素，其余元素不渲染或设置为display:none。4.使用requestAnimationFrame优化渲染避免频繁重绘，使用节流方式控制渲染频率。三、关键技术点1.动态》的详细内容，更多关于的资料请关注golang学习网公众号！