Vue 3 虚拟化超长文本列表需用占位+测量+缓存+增量校准四步闭环：先以中位数预估高度撑开滚动容器，再逐项测量缓存真实高度，构建累计高度数组支持二分查找，并通过 ResizeObserver 和 forceUpdateHeight 应对动态变化。
超长文本列表的虚拟化难点不在“多”，而在“高不可预知”——每条文本行数不一、字体大小不同、换行逻辑各异，导致高度无法静态设定。Vue 3 中处理这类动态高度，核心是用占位+测量+缓存+增量校准四步闭环，而非依赖固定值。
用预估高度撑开滚动容器，避免初始白屏
首次渲染时，真实高度尚未获取，必须用合理预估值撑起整个列表高度，保证滚动条存在且位置可映射：
- 预估高度建议取常见文本长度的中位数（如 60–120px），而非均值，避免被极长项拉偏
- 总占位高度 = 预估高度 × 数据总条数，赋给一个绝对定位的 placeholder 元素或 content 容器的 height 样式
- 这个 placeholder 不参与渲染内容，仅维持滚动空间，z-index 设为 -1 或 visibility: hidden
首次挂载后逐项测量并缓存真实高度
在组件 onMounted 或 useVirtualList 初始化阶段，对可视区及缓冲区内的项进行 DOM 测量：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用
ref绑定每个<div class="item">节点，遍历调用el.offsetHeight或getBoundingClientRect().height - 将结果按数据唯一 key（如
item.id）存入 Map 或 reactive 对象，例如：itemHeights.set(item.id, height) - 避免重复测量：已缓存高度的项跳过，未渲染/未挂载的项暂不测
滚动中动态更新累计高度与可视索引
真实高度确定后，需重建“滚动位置 ↔ 数据索引”的映射关系：
立即学习“前端免费学习笔记（深入）”；
- 构建
accumulatedHeights数组：第 i 项值 = 前 i 项真实高度之和（含第 i 项），支持 O(log n) 二分查找 - 滚动时根据
scrollTop在accumulatedHeights中二分定位起始索引，再结合容器高度反推结束索引 - 若某项高度后续变化（如展开收起、富文本重排），需触发该条及后续所有项的
accumulatedHeights重算
应对文本异步加载或动态展开的容错策略
超长文本常伴随图片懒加载、折叠展开、Markdown 渲染等延迟行为，需防止高度错位：
- 监听
ResizeObserver（针对 item 内部尺寸变化），自动触发对应项高度重测与缓存更新 - 为可展开区域预留最小高度（如 “展开” 按钮占 24px），展开后再补测完整高度
- 提供
forceUpdateHeight(id)方法，供业务侧在富文本渲染完成、图片加载完毕后手动刷新
