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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章