如何用Vue构建虚拟列表组件优化长列表性能？

本文共计2907个文字，预计阅读时间需要12分钟。

目录：

一、虚拟列表

二、实现思路与难点思考

三、其他注意事项

四、实现

1. 最终实现效果 2. 实现代码 3. 模拟数据的后端代码

五、封装为组件

1. Props 2. 事件

六、虚拟列表组件代码

1. 使用代码 2. 近期更新

目录

• 一、虚拟列表
• 二、实现思路
• 难点与思考：
• 其他注意事项：
• 三、实现
• 最终实现效果
• 实现代码
• 模拟数据的后端代码
• 四、封装为组件
• props：
• event：
• 虚拟列表组件代码
• 使用代码

最近项目中需要用到列表的展示，且不分页。当数据加载太多时会造成性能问题。因此采用虚拟列表来优化

一、虚拟列表

真实列表：每条数据都展示到html上，数据越多，DOM元素也就越多，性能也就越差。

虚拟列表：只展示部分数据（可见区域展示数据），当屏幕滚动时替换展示的数据，DOM元素的数量是固定的，相比较真实列表更高效。