如何通过虚拟列表（Virtual List）渲染万级数据量而不产生卡顿

直接用 v-for 渲染万级数据会卡死，因性能瓶颈在 DOM 创建、布局计算和重绘；vue-virtual-scroll-list 需合理设置 keeps（20–50）、estimate-size（整数像素值）、data-key，并避免子组件依赖内部状态或使用 v-model。

为什么直接用 v-for 渲染万级数据会卡死

浏览器渲染性能瓶颈不在 JS 执行，而在 DOM 节点创建、布局计算和重绘。10 万条 <div> 即使内容极简，也会生成 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 自然不会触发。