直接用 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，移动端极易闪退。<h3>
<code>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 自然不会触发。
