Vue如何实现虚拟列表组件来优化长尾词列表的加载性能？

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

目录

一、虚拟列表

二、实现思路：难点与思考

三、其他注意事项

四、实现

五、最终实现效果

六、实现代码

七、模拟数据的后端代码

八、封装为组件

九、props

十、事件

十一、虚拟列表组件代码

十二、使用代码

十三、最近更新

目录

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

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

一、虚拟列表

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