vue虚拟列表性能关键在于精准渲染可见项，依赖唯一key映射位置、轻量无副作用item组件、合理高度策略及显式约束滚动容器样式。
Vue.js 开发高性能虚拟列表项组件，关键不在“写得多”，而在“渲染得准”——只让当前可见的那几项真正挂载、更新和卸载，其余全靠位置计算与尺寸缓存来“模拟存在”。核心不是隐藏 DOM，而是根本不去创建它。
数据源必须带唯一 key 字段
虚拟滚动依赖精确映射：滚动位置 ↔ 数据索引 ↔ 渲染位置。如果数据项没有稳定、唯一的标识，组件无法缓存尺寸、复用节点或定位偏移，会频繁重绘甚至错位。
- ✅ 正确示例：`{ id: 'user_1001', name: '王五', content: '...' }`（id 是字符串或数字，全局唯一）
- ❌ 常见错误：`{ name: '王五' }`（无 key）、`{ index: 0 }`（非稳定，排序后失效）、`{ id: Math.random() }`（每次渲染都变）
- 推荐字段名：
id、uid、key—— 与组件的:data-key属性严格一致
列表项组件要轻量且无副作用
每个 item 组件会被高频复用、快速挂载/卸载。若内部有定时器、监听器、第三方库初始化或复杂 computed，会拖慢滚动帧率，甚至引发内存泄漏。
- 避免在
mounted中发起请求或绑定全局事件；改用onBeforeMount+ 条件判断，或交由父级统一管理 - 不依赖
this.$refs或document.querySelector；DOM 操作应在onUpdated中节流处理，或用ResizeObserver替代轮询 - props 只接收
source（当前数据）和index（序号），不传整个列表或上下文对象
高度策略选对才能稳
固定高度最高效，动态高度更灵活，但需额外测量成本。选哪种，取决于你的业务是否允许“预估+修正”。
-
固定高度（如每行 64px）：设置
:item-height="64"，无需测量，滚动零抖动，适合头像+单行文本等规整结构 -
动态高度（如富文本、多图卡片）：用
DynamicScroller或vue-virtual-scroll-list的自动尺寸缓存机制；首次渲染后记录真实高度，后续直接查 Map - 慎用
min-item-size：仅作占位基准，不能替代真实测量；否则滚动时会出现“内容被裁切”或“空白跳动”
滚动容器样式必须显式约束
虚拟列表靠 getBoundingClientRect() 和 scrollTop 计算可视区域。如果容器没设明确高度、溢出行为不明确，位置计算就会失准。
- 容器必须有固定像素高度（如
height: 500px），不能是min-height或flex: 1未兜底的情况 - 必须启用垂直滚动：
overflow-y: auto或scroll；禁用overflow: hidden - 避免父级 transform / scale / filter —— 这些会创建新的 stacking context，干扰
getBoundingClientRect()返回值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
