企业官网建设流程全解析

vue-recyclerview 是一款基于 Vue 2 的虚拟滚动长列表组件，通过 DOM 回收、多列瀑布流让数万条数据的列表依然流畅。本清单带你吃透它的两个进阶性能开关——cacheVM组件缓存与reuseVM实例复用，帮助你快速定位卡顿根源，把滚动帧率拉满 🚀

长列表为什么会卡？先搞懂 vue-recyclerview 的回收机制

vue-recyclerview 借鉴了 Android RecyclerView 的思路：屏幕上只保留可见区域附近的真实节点，其余位置用占位的"墓碑"（tombstone）撑住滚动高度。每次滚动时，它会执行一次attachContent()流程：

1. 释放离屏节点：getUnUsedNodes 遍历并清理视口外的条目；
2. 渲染可视条目：renderItems 只为屏幕附近的条目创建/复用 DOM 节点；
3. 缓存高度与定位：cacheItemHeight 记录每个条目的实际高度，供下次滚动快速计算锚点。

关键点在于第 1 步"释放"时，Vue 实例（VM）是被销毁还是被留下，这正是cacheVM和reuseVM发力的地方。

三大优化策略：从 DOM 节点到 Vue 实例的分层回收

vue-recyclerview 的默认配置（recyclerview.js）提供了三层可开关的回收机制：

其中 DOM 节点回收是免费的：离屏节点不会被remove后立刻丢弃，而是进入 unusedNodes 队列，下次直接拿来用。真正消耗性能的，是反复执行new Vue()创建条目组件——两个高级选项就是冲着它去的。

cacheVM 缓存实战：按 id 留存实例，回滚秒显

cacheVM开启后，ContentSource.render 会先按data.id查缓存，命中就直接复用已有实例的 DOM，完全不触发new Vue()：

// 在 options 中开启：缓存上限设为 100 <RecyclerView :options="{ cacheVM: 100 }" :fetch="MiFetch" :item="MiItem" :tombstone="MiTomstone" ></RecyclerView>

配合离屏时的处理逻辑：clearItem 在cacheVM模式下只做removeChild，不销毁实例，实例静静躺在 itemCache 里等待"回滚召回"。

两个必须注意的细节

• 条目数据必须带唯一id字段，缓存以data.id为键，缺少 id 会缓存失效；
• cacheVM需要设置大于 50 才会启用自动回收：当缓存数量超过上限时，itemCache.recycle 会随机销毁 10 个实例防止内存无限膨胀。若设为10这类小数字，回收逻辑不会生效，缓存只会单调增长。

✅ 适用场景：用户频繁上下回滚、条目组件初始化成本较高（如内部有复杂计算、请求懒加载）的列表。

reuseVM 实例复用实战：对象池 + 换数据不换实例

reuseVM的思路与cacheVM完全不同：它不关心"同一条目是否出现过"，而是维护一个实例对象池reuseVM.queue，每个条目出屏时只标记inuse: false回到池中，入屏时：

• 池里有空闲实例 → 直接item.vm.data = data替换数据，实例原样复用；
• 池里没有 → 才new Vue()并推入池中。

// 在 options 中开启 <RecyclerView :options="{ reuseVM: true }" :fetch="MiFetch" :item="MiItem" ></RecyclerView>

释放入口在 source.free：条目离屏时调用source_.free(item.data)，按data.id把池中实例标记为空闲。

使用 reuseVM 的三个前提

• item 组件必须通过props: { data }接收数据，复用时只有data会被替换，靠它驱动视图更新；
• 数据必须带id，空闲实例通过id匹配归还；
• 条目组件内部避免"只在 created 钩子执行一次"的逻辑，因为复用后只会进入 updated。

✅ 适用场景：条目结构高度同质（如消息流、Feed 列表），且希望内存占用恒定——池的大小会稳定收敛在可视条目数左右，不会像缓存那样膨胀。

cacheVM 还是 reuseVM？一张对比表帮你选型

💡 两者都走 render 的优先分支，不建议同时开启，按场景二选一即可。

完整性能优化清单：滚动丝滑的 6 个检查项

对照下面清单逐项排查，即可覆盖 vue-recyclerview 的常见性能调优点：

1. 调小prerender/remain：默认分别为20和10（选项默认值）。可视条目越多渲染开销越大，低端设备可降到10/5；
2. 条目组件保持轻量：避免在 item 里嵌套子组件树、绑定全局事件、做同步重计算；
3. 给所有数据提供唯一id，这是两个高级策略生效的前提；
4. 回滚场景开cacheVM: 100（记得大于 50 才启用自动回收）；
5. 内存敏感场景开reuseVM: true，并让 item 完全由dataprop 驱动渲染；
6. 固定条目高度：高度可预测能让 calculateAnchoredItem 少做墓碑估算，滚动定位更稳。

完整的配置项说明可参考 README 中的 Props Options 表格，示例代码见 examples/component 目录下的 App.vue。

按这份清单把cacheVM与reuseVM用起来，你的 Vue 长列表就能在数万条数据下依然保持丝滑滚动 🎉