vue-long-list-load，满足特殊条件的长列表加载。支持：1、各个节点高度不同且可自由设定 2、各个节点可修改不影响加载效果 3、可精确的滚动到指定位置。
背景
有个长列表渲染的需求，本来用vue-virtual-scroll-list的。但是每个节点的高度不一样，用着有点问题。如果也有相应的需求可以参考下我的方案。欢迎大家交流！
vue-long-list-load
满足特殊条件的的长列表加载。 列表内各个节点高度不一，各个节点可以进行修改，定位到指定位置指定节点。 …
主要内容
- vue-long-list-load 与 vue-virtual-scroll-list 对比
- vue-long-list-load实现思路
- 基本代码
- 插件使用方式
- 插件参数说明
一、组件对比
vue-long-list-load ，vue-virtual-scroll-list两个插件各有优缺点，当我们在选择插件的时候要选择最适合应用场景的插件。下面是两个插件的基本功能对比。vue-long-list-load 主要特点是适用于各个节点尺寸不统一的场景，vue-virtual-scroll-list更适用于高度统一节点以列表长度以w计的这种列表。
二、实现思路
主要思想就是通过\color{red}{虚拟dom}虚拟dom占位各个节点，根据可显示视口的变化来展示该展示的节点。影响可显示视口的因素的监听，页面整体宽高变化、节点高度变化、页面的滚动定位到某一个节点等都可能会影响到视口的变化。当视口发生变化后计算可显示的节点，将可显示的节点挂载上节点的组件，不在视口内的节点销毁组件紧保留一个空的div。下图为实现思路的流程图。
三、关键方法源码分析
主入口html结构如下，\color{red}{v-for}v−for 展示长列表长度的的节点，并且通过:style 来设置一个\color{red}{最小高度}最小高度，设置最小高度的原因是这个高度值可能不准确，当真正组件渲染完之后计算出最准确的高度，如果直接height的话可能会使节点内的组件展示不全。同时每个节点设置唯一id（scrollitem_ 唯一标识），在根据数据获取dom信息时候使用。节点组件定义了唯一的class （long-item- 唯一标识），主要用来挂载真实列表组件，同时监听组件的高度变化。showlist[index]来控制节点是否时候显示的唯一标识。
当showlist[index]为true的时候，对应的节点显示。long-item 在mounted生命周期时，回调extendccomments。通过\color{red}{vue.extend profile}vue.extendprofile挂载到对应的dom上。componentprops是节点组件传过来的一些参数，在挂载的时候全部挂载上。
通过\color{red}{element-resize-detector}element−resize−detector来监听dom尺寸的变化，每个节点的宽高发生变化的时候，并且与原来的尺寸不一样回调heightchange方法，进行尺寸的更新及显示节点的操作计算。
获取可显示的视口区域的方法，页面滚动和尺寸变化都会调用到这个方法，所以这个方法在调用的时候做防抖处理300ms内有连续调用只会执行最后一次调用，要不然会频繁计算影响性能。可显示视口区域计算方式是当前视口 及 前后两个视口总共三个视口的尺寸。这样在小的滚动范围内会有较好的体验。
根据高度或者宽度来计算节点是否显示，因为这个计算量比较大避免而且这个方法与其他方法没有什么关联，直接单独开一个\color{red}{独立线程}独立线程进行计算。通过引入\color{red}{simple-web-worker}simple−web−worker这个插件单独开一个线程进行计算显示节点。计算方法主要有三点：当前节点的开头在显示视口内、当前节点的结尾在显示视口内、当前节点开头和结尾都不在显示视口内。分为这三种情况，只要满足一种情况，则该节点就显示在显示视口中。
四、使用方式
安装vue-long-list-load：
项目内调用
五、参数说明
部分参数说明
总结
项目中实践数据，基本每个节点至少500个dom节点，平均也在800个dom节点以上，用vue-long-list-load 不在渲染区域内的题目只会渲染2个dom节点。按正常800左右个dom节点的题目计算 一般渲染区域渲染的节点在9个左右，如果是n节点的列表 ，每次加载 dom操作都减少(n-9)x(800-2)个dom的渲染，如果\color{red}{1000个节点}1000个节点的列表每次加载和操作的时候相当于减少了\color{red}{726180}726180个dom节点的渲染。首次渲染还有修改后的重绘都大大减少了dom的渲染加快了加载速度提高了用户体验。 此方案已经在项目中实践一段时间，用户反馈很好。如果大家也有类似的场景需求，欢迎大家使用！交流！
以上就是如何让vue长列表快速加载的详细内容，更多关于vue 长列表快速加载的资料请关注www.887551.com其它相关文章！
