如何优化Vue长列表实现高效快速加载？

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

Vue-Long-List-Load，满足特殊条件的长列表加载。支持：1、各节点高度不同且可自定义；2、各节点可修改不影响加载效果；3、可精确滚动到指定位置。背景：有一个长列表渲染的需求。

vue-long-list-load，满足特殊条件的长列表加载。支持：1、各个节点高度不同且可自由设定 2、各个节点可修改不影响加载效果 3、可精确的滚动到指定位置。

背景

有个长列表渲染的需求，本来用vue-virtual-scroll-list的。但是每个节点的高度不一样，用着有点问题。如果也有相应的需求可以参考下我的方案。欢迎大家交流！

vue-long-list-load

满足特殊条件的的长列表加载。 列表内各个节点高度不一，各个节点可以进行修改，定位到指定位置指定节点。 www.npmjs.com/package/vue…

主要内容

1. vue-long-list-load 与 vue-virtual-scroll-list 对比
2. vue-long-list-load实现思路
3. 基本代码
4. 插件使用方式
5. 插件参数说明
   

一、组件对比

vue-long-list-load ，vue-virtual-scroll-list两个插件各有优缺点，当我们在选择插件的时候要选择最适合应用场景的插件。下面是两个插件的基本功能对比。