vue 3 不定高虚拟列表通过 resizeobserver 动态测量+weakmap 缓存高度+累积逼近法计算可视范围，配合占位元素实时更新滚动条，实现流畅渲染。
Vue 3 中实现不定高列表的虚拟化渲染，核心在于绕过“高度未知”带来的计算死锁，不依赖预设值硬算位置，而是用动态测量 + 缓存 + 响应式更新三者协同。固定高方案靠 scrollTop / itemHeight 直接算索引，而不定高必须先知道每项真实高度，才能定位可视区域——这正是难点所在。
用 ResizeObserver 主动监听真实高度
不要等滚动时再测量，而是在每个列表项挂载后，立即用 ResizeObserver 监听其内容尺寸变化。它比 getBoundingClientRect 更轻量、不触发重排，且能响应图片加载、字体渲染完成等异步布局变化。
- 每个
<listitem></listitem>组件内部创建ResizeObserver实例，观测第一层内容容器（如<div class="content">） <li>高度测得后，通过事件或上下文（如 <code>provide/inject）通知父级虚拟列表更新缓存 - 首次进入视口前就完成测量，后续滚动可直接查缓存，避免重复 DOM 操作
用 WeakMap 缓存已知高度，避免重复开销
高度不是全局状态，而是与具体数据项绑定。用 WeakMap 存储 item → height 映射，既支持对象引用作为 key（适配复杂 item 结构），又不阻止垃圾回收。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章