在复杂的前端应用中，实时传输列表（如上传/下载任务列表）的渲染性能至关重要。尤其当列表项众多且频繁更新时，直接渲染所有项会带来严重的性能瓶颈。vue-virtual-scroller 作为一款高性能的虚拟滚动组件，可有效提升列表渲染效率。以下是我使用过程中的一些小总结
1. 选择合适的虚拟滚动组件：RecycleScroller 与 DynamicScroller
- RecycleScroller 支持固定高度和可变高度列表，且允许传入自定义尺寸
item-size，渲染效率极高，适合绝大多数定高或高度变化不大的列表项场景。 - DynamicScroller 支持不定高列表，适用场景更广，但相比 RecycleScroller，性能略有损耗，尤其在频繁更新时需要谨慎使用。
建议：
优先使用 RecycleScroller 并尽量固定或合理预估单项高度，确保性能最佳。若确实存在大量不规则高度的列表项，才考虑用 DynamicScroller 并做好性能监控和优化。
2. 列表对象尽量复用，避免替换引用
频繁轮询传输状态并更新列表数据时，建议尽量修改已有列表对象属性，而非整体替换数组或对象引用。
- 复用对象引用，能让
vue-virtual-scroller正确判断哪些项需要重新渲染，避免整个列表被重绘。 - 避免直接用新数组替换旧数组，尤其是传入给
vue-virtual-scroller的items属性。
3. 组件中不要给外层容器整体添加 key
- 给列表项最外层组件或容器整体添加
key，会导致vue-virtual-scroller失去控件复用的效果，强制每次都重新渲染。 - 仅对真正需要动态更新的子组件，如进度条或状态显示，使用
key来保证正常刷新。
此优化点对性能影响显著，避免无谓的渲染浪费。
4. 子组件中避免 computed 返回函数
Vue 中，computed 返回是响应式缓存值；但如果 computed 返回的是函数（即高阶函数），每次访问都会重新执行，导致频繁渲染。
- 传输列表中频繁更新的状态项，不建议这样使用。
- 应改为直接返回具体计算结果，或使用方法（
methods）替代。
5. 异步操作复用 Promise，避免重复请求
传输列表 item 项中的异步操作（如请求状态或进度）通常高频调用，为避免重复请求和资源浪费：
- 使用一个对象或 Map 来缓存正在进行的 Promise；
- 同一请求若已发起，直接复用已有 Promise，等待结果；
- 请求完成后清理缓存。
示例：
const promiseCache = {}
function fetchStatus(id) {
if (promiseCache[id]) {
return promiseCache[id]
}
const promise = asyncFetchStatus(id).finally(() => {
delete promiseCache[id]
})
promiseCache[id] = promise
return promise
}
参考链接
总结
借助 vue-virtual-scroller，结合以上优化策略，能显著提升传输列表的渲染效率和响应速度：
- 优先选用合适虚拟滚动组件（RecycleScroller）
- 保持数据对象引用稳定，避免整体替换
- 谨慎使用
key控制渲染范围 - 避免高频执行的
computed函数写法 - 异步请求重用 Promise 减少网络压力
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或留言交流 😊