实用的VUE系列——我们怎么用vue实现一个虚拟滚动插件？ 点击关注公众号，“技术干货”及时达！声明：本文为稀土掘金技术社区首发签约文章 前言虚拟滚动 是前端领域的一个很常见的技术方案，它出现在我们工作中的方方面面，面试要考，业务要用，性能要优化,数据要展示 都都离不开「虚拟滚动」 的背影 于是，最近闲来无事，浅浅的研究了一下, 不成想技术原理还挺深奥 细究之后，总结为这篇文章，跟这位jym 汇报一下 虚拟滚动有哪些应用场景说起虚拟滚动的应用场景，我们还是要追溯到问题的本质解答问题。 「我们为什么要使用虚拟滚动？」 答案很简单，不用虚拟滚动页面他卡啊 有的jym 就开始问了，为啥会卡呢？ 那我就要「从丘处机路过牛家村开始了」 我们知道，页面之所以卡顿是，是因为同时渲染的元素太多了 大家 可以发现，一个select标签，只是简单的渲染上千条数文案数据 他就耗时接近两秒，于是，我们在这两秒内，我们就无法进行任何操作， 具体为什么无法操作，这属于浏览器工作原理的范畴。我们就不再废唾沫星子了 如果有兴趣，可以去这重学前端（五）——谈谈前端性能优化(https://juejin.cn/post/6983706469015388168) 「简而言之，就是单线程的特性，导致js执行和渲染是互斥的，无法同时进行，只能将js 放入eventloop 队列中，延后执行」 于是有了这些片汤话的铺垫，我们就能很简单的得出结论 :「大连数据的列表都可以使用虚拟滚动」 接下来，他的应用场景就能「呼之欲出」了，比如在web页面中，table表格、list、 select、 tree等通用场景，都是虚拟滚动的需要应用的地方。 虚拟滚动原理我们在之前的 推导中找到了需要应用的地方， 接下来就该怎样应用了，也就是 「虚拟滚动原理」 其实虚拟滚动 听起来很玄乎，仿佛是一个高大上的技术方案，其实他的原理很简单， 在目前的行业实践中，主要有两个方向 1、根据滑动位置，动态加载内容2、只渲染可视区域的列表项，非可见区域的**不渲染别急我们一个一个讲 1、根据滑动位置，动态加载内容这是一个非常讨巧的方案， 因为他的原理很有意思，你不是说，同时加载卡吗？ 「那我一点点加载分批来不就解决了吗？」 element-plus Infinite Scroll 就是这种方案，是一个指令插件，使用方式很简单 ulv-infinite-scroll="load"class="infinite-list"style="overflow:auto" liv-for="iincount":key="i"class="infinite-list-item"{{i}}/li /ul 其实，本质上来说，他是什么类型的插件无所谓，「形式不重要，内容才重要」！！ 我们来简单的研究一下他的内容（也就是源码） //@ts-nocheck import{nextTick}from'vue' import{isFunction}from'@vue/shared' import{throttle}from'lodash-unified' import{ getOffsetTopDistance, getScrollContainer, throwError, }from'@element-plus/utils' importtype{ComponentPublicInstance,ObjectDirective}from'vue' //一些常量 exportconstSCOPE='ElInfiniteScroll' exportconstCHECK_INTERVAL=50 exportconstDEFAULT_DELAY=200 exportconstDEFAULT_DISTANCE=0 //默认属性 constattributes={ delay:{ type:Number, default:DEFAULT_DELAY, }, distance:{ type:Number, default:DEFAULT_DISTANCE, }, disabled:{ type:Boolean, default:false, }, immediate:{ type:Boolean, default:true, }, } //类型定义 typeAttrs=typeofattributes typeScrollOptions={[KinkeyofAttrs]:Attrs[K]['default']} typeInfiniteScrollCallback=()=void typeInfiniteScrollEl=HTMLElement{ [SCOPE]:{ container:HTMLElement|Window containerEl:HTMLElement instance:ComponentPublicInstance delay:number//exportfortest lastScrollTop:number cb:InfiniteScrollCallback onScroll:()=void observer?:MutationObserver } } //获取一下外部传入的属性 constgetScrollOptions=( el:HTMLElement, instance:ComponentPublicInstance ):ScrollOptions={ returnObject.entries(attributes).reduce((acm,[name,option])={ const{type,default:defaultValue}=option constattrVal=el.getAttribute(`infinite-scroll-${name}`) letvalue=instance[attrVal]??attrVal??defaultValue value=value==='false'?false:value value=type(value) acm[name]=Number.isNaN(value)?defaultValue:value returnacm },{}asScrollOptions) } //销毁dom监听 constdestroyObserver=(el:InfiniteScrollEl)={ const{observer}=el[SCOPE] if(observer){ observer.disconnect() deleteel[SCOPE].observer } } //滚动条事件 consthandleScroll=(el:InfiniteScrollEl,cb:InfiniteScrollCallback)={ //取出实例中的内容 const{container,containerEl,instance,observer,lastScrollTop}= el[SCOPE] //同样的获取属性 const{disabled,distance}=getScrollOptions(el,instance) //拿到他的容器高度，滚动的总共高度，举例顶部的举例 const{clientHeight,scrollHeight,scrollTop}=containerEl //获取这一次滚动了多少 constdelta=scrollTop-lastScrollTop //保存当前这次滚动距离，方便下一次计算 el[SCOPE].lastScrollTop=scrollTop //判断一些特殊情况，如果往上滑，或者禁用的时候，就不处理 if(observer||disabled||delta0)return letshouldTrigger=false //如果绑定的指令就是容器 if(container===el){ //计算是否需要执行函数 shouldTrigger=scrollHeight-(clientHeight+scrollTop)=distance }else{ //如果绑定的指令不是容器，那么就用另一种计算方式 const{clientTop,scrollHeight:height}=el constoffsetTop=getOffsetTopDistance(el,containerEl) shouldTrigger= scrollTop+clientHeight=offsetTop+clientTop+height-distance } //如果判断出来的距离需要加载新数据 if(shouldTrigger){ //那么就执行下拉获取新数据 cb.call(instance) } } functioncheckFull(el:InfiniteScrollEl,cb:InfiniteScrollCallback){ //从SCOPE中取出实例 const{containerEl,instance}=el[SCOPE] //判断禁用情况 const{disabled}=getScrollOptions(el,instance) //如果有禁用视口高度等于0等情况，那就直接回退 if(disabled||containerEl.clientHeight===0)return //然后就判断，如果滑动宽度比视口还小 if(containerEl.scrollHeight=containerEl.clientHeight){ //那就说明可能要执行一次函数了拉取下一页 cb.call(instance) }else{ //否要就要清除监听 //移除监听的原因是因为，他出现滚动条了，就可以执行滚动事件了 //不在需要靠监听dom变动来解决问题 destroyObserver(el) } } //核心代码在这 //指令型插件，很多生命周期 constInfiniteScroll:ObjectDirective InfiniteScrollEl, InfiniteScrollCallback ={ //dom初始化执行 asyncmounted(el,binding){ //取出回调函数 const{instance,value:cb}=binding //兜底判断 if(!isFunction(cb)){ throwError(SCOPE,"'v-infinite-scroll'bindingvaluemustbeafunction") } //防止没有dom出问题，用nextTick处理一下 awaitnextTick() //拿到其中的一些默认配置 const{delay,immediate}=getScrollOptions(el,instance) //获取滚动条层的dom容器 constcontainer=getScrollContainer(el,true) //判断容器是不是window因为如果是window的话，就必须啊找到他下头的第一个节点 //因为window是不能滚动的 constcontainerEl= container===window ?document.documentElement :(containerasHTMLElement) constonScroll=throttle(handleScroll.bind(null,el,cb),delay) if(!container)return //绑定环境，因为在页面中可能会有很多个虚拟滚动实例 //所以我们要将每个实例保存起来方便后续取用 //这里的技巧就是绑定在el上，后续给大家说好处 el[SCOPE]={ instance, container, containerEl, delay, cb, onScroll, lastScrollTop:containerEl.scrollTop, } //immediate表示是否立即执行加载 if(immediate){ //如果立即执行，那么就监听dom变化 constobserver=newMutationObserver( throttle(checkFull.bind(null,el,cb),CHECK_INTERVAL) ) //保存实例 el[SCOPE].observer=observer //启动监听，针对当前el下方的所有dom变动 observer.observe(el,{childList:true,subtree:true}) //执行检查函数，主要就是为了判断是不是到底了，包括每次监听dom变化也是这个原因 //这个方法就是为了防止我没有盛满容器，有不能出发scroll事件，从而，用的兜底策略 //利用监听dom变化来多次监听从而多次执行获取新内容函数 checkFull(el,cb) } //绑定滑动时间，实时计算距离，是否需要下拉新内容 container.addEventListener('scroll',onScroll) }, //dom卸载 unmounted(el){ if(!el[SCOPE])return const{container,onScroll}=el[SCOPE] container?.removeEventListener('scroll',onScroll) destroyObserver(el) }, //dom更新 asyncupdated(el){ //如果没有实例就不管了 if(!el[SCOPE]){ awaitnextTick() }else{ //如果有的话，要重新检查一下 const{containerEl,cb,observer}=el[SCOPE] if(containerEl.clientHeightobserver){ checkFull(el,cb) } } }, } exportdefaultInfiniteScroll 其实上述代码中洋洋洒洒写了这么多，其实主要就干了一个事情 「利用滚动条的scroll 事件，判断滚动是否到底，如果到底则动态加载新数据，如此而已」 之前我说过，他的优秀之处，不是形式，而是内容，因为他内部做了大量的兼容，以及小妙招对于我们日常的开发大有裨益 1、 指令实例保存方式2、 利用MutationObserver保证兜底策略指令实例保存方式这是一个非常「新颖的方案」，在这之前，我们知道指令内部是无法保存实例的,如果当指令初始化之后，指令外部想要使用指令初始化之后的实例，我们大多数人的常规操作，将实例 挂载到全局，而这么一来就会有个问题，如果我有多个实例呢？ 所以这个插件的保存实例 方式就很「巧妙」，将内容挂载到 dom 上，既解决了实例保存的问题，有解决了多指令获取实例的问题。 我们想要使用实例的时候只需要 //html ulref="infiniteRef"v-infinite-scroll="load"class="infinite-list"style="overflow:auto" liv-for="iincount":key="i"class="infinite-list-item"{{i}}/li /ul //js constinfiniteRef=ref(null); //从dom中取实例 contentRef.value.ElInfiniteScroll.observer() 利用MutationObserver保证兜底策略MutationObserver 我就不再赘述了，他是一个监听 dom 的 api 但从来没有人会想到利用MutationObserver 去主动更新 dom 这其实就是一个创新升级，希望在我们搬砖的项目中，可以借鉴。 第二种方案「指的是渲染可视区域的列表项，非可见区域的」不渲染 2、只渲染可视区域的列表项，非可见区域的不渲染 上图我们可以发现，不过表格怎么变化，dom 就那么几个 朴实无华，主旨很简单， 分治思想 我们只管当前只一片就行 很多人可能不太理解，那么我就用一个图，来给大家生动的展示一下 尽力了，原谅我骥某人才疏学浅，只能画成这样了，各位jym 凑活看吧 画的虽然有点ugly,但表达的东西，相信大家都能看懂 「我们只是将一部分视口看到的内容展示出来， 其他的假装展示了，反正你也看不见」 可接下来问题来了，我展示是展示了，可我要滑动页面，怎么更新视口内容呢？ 如何更新视口内容如何更新视口，其实本质上就是我们如何能让那几十个我们能看得见的 dom 永远在视口处活动就可以 那应该怎么做呢？ 我们首先可以确定两点 1、一定要监听滚动事件scroll2、当滚动条滚动的时候，要移动相应内容到视口上来ok，「一拍即合」，我们来实现一下 scriptsetuplang="ts" import{ref}from'vue' constpaddingTop=ref(0) constscroll=(e)={ if(e.target.scrollTop%20020){ paddingTop.value=e.target.scrollTop } } /script template divclass="warp"@scroll="scroll" divclass="scroll-box":style="`padding-top:${paddingTop}px`" divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div divclass="test-item"这是测试item/div /div /div /template stylelang="scss"scoped .warp{ height:300px; width:500px; border:1pxsolid#000; overflow:auto; margin-top:100px; margin-left:100px; .scroll-box{ height:6000px; } } /style 以上代码中，就是我们利用滚动事件，事实将内容放到视口中，这里我用的是padding 解决的问题，当然你也可以用 css3的transition搞定，无所谓。 还是那句话，「形式不重要，内容才重要」 「一图胜千言」 有了这个基础，我们就可以进行接下来的一步，动态改变 item 内容，这里我自己写可能有点班门弄斧，我们从网上选取了一个库来参考一下，当然，基于国际惯例，我也臭不要脸的给他 fork 下来并且有详细的注释 有兴趣可以移步virtual-list 接下来我们就来浅浅的分析一下 首先他的使用方式很简单 //data-sources传入数据 //data-component传入list组件（其实我觉得用插槽更好） VirtualList class="list-dynamicscroll-touch" :data-key="'id'" :data-sources="items" :data-component="Item" :estimate-size="80" :item-class="'list-item-dynamic'" / 虚拟滚动源码分析聊起源码分析，很多人总是想将源码净收眼底，这其实是一个看源码的误区 毕竟老话说得好，「不能既要又要」，因为在源码中的大多数内容都是为了兼容和兜底用的，对于我们的业务帮助可能并不大 我们看源码其实本质上说，就是领会精神（也就是核心原理） 于是，回到当前问题上来也是一样， 「我们只需要关注他源码中怎样根据滚动替换内容即可」 至于那些兜底和兼容逻辑，随他去吧，因为他只是在当下的场景下的一个「不得不的一个做法」 放到的的业务中可能并不适用 就好比很多人在看历史的时候，总以为可以以史为鉴 其实，很多人不知道的是所谓的「以史为鉴，鉴的不过是自己的偏见」 所有的历史事件的发生，都有他不得不发生的理由，「盲目瞎学，学的也只是你自己的偏见」 额，好像有点跑题了。。。。 我们回到正题，「研究他怎么动态更新内容」 开源库和我们普通代码的区别就是，他要被别人指指点点，所以封装一般都成了所有开源库的标配 于是，本库就直接封装了虚拟滚动的的内容 代码如下： /** *virtuallistcorecalculatingcenter * *@format */ constDIRECTION_TYPE={ FRONT:'FRONT',//scrolluporleft BEHIND:'BEHIND',//scrolldownorright } constCALC_TYPE={ INIT:'INIT', FIXED:'FIXED',//固定item宽度 DYNAMIC:'DYNAMIC',//动态item宽度 } constLEADING_BUFFER=2 //虚拟滚动实例本质上就是提供了一些封装方法和初始状态 exportdefaultclassVirtual{ constructor(param,callUpdate){ //初始化启动 this.init(param,callUpdate) } init(param,callUpdate){ //传入参数 this.param=param //回调函数 this.callUpdate=callUpdate //总展示item，注意是一步步的展示的 this.sizes=newMap() //展示的总高度，为了计算平均值的 this.firstRangeTotalSize=0 //根据上述变量计算平均高度 this.firstRangeAverageSize=0 //上一次的滑动到过的index this.lastCalcIndex=0 //固定的高度的item的高度 this.fixedSizeValue=0 //item类型，是动态高度，还是非动态高度 this.calcType=CALC_TYPE.INIT //滑动距离，为了算padding的大小 this.offset=0 //滑动方向 this.direction='' //创建范围空对象，保存展示的开始展示位置，结束展示位置， this.range=Object.create(null) //先初始化一次 if(param){ this.checkRange(0,param.keeps-1) } //benchmarktestdata //this.__bsearchCalls=0 //this.__getIndexOffsetCalls=0 } destroy(){ this.init(null,null) } //返回当前渲染范围 //其实就是深拷贝 getRange(){ constrange=Object.create(null) range.start=this.range.start range.end=this.range.end range.padFront=this.range.padFront range.padBehind=this.range.padBehind returnrange } isBehind(){ returnthis.direction===DIRECTION_TYPE.BEHIND } isFront(){ returnthis.direction===DIRECTION_TYPE.FRONT } //返回起始索引偏移 getOffset(start){ return( (start1?0:this.getIndexOffset(start))+this.param.slotHeaderSize ) } updateParam(key,value){ if(this.paramkeyinthis.param){ //ifuniqueIdschange,findoutdeletedidandremovefromsizemap if(key==='uniqueIds'){ this.sizes.forEach((v,key)={ if(!value.includes(key)){ this.sizes.delete(key) } }) } this.param[key]=value } } //按id保存每个item saveSize(id,size){ this.sizes.set(id,size) //我们假设大小类型在开始时是固定的，并记住第一个大小值 //如果下次提交保存时没有与此不同的大小值 //我们认为这是一个固定大小的列表，否则是动态大小列表 //他这个套路很巧妙他给每一列的高度判断一下 //如果相同那么就默认为是相同的高度，如果不同那么默认为不同的高度 if(this.calcType===CALC_TYPE.INIT){ this.fixedSizeValue=size this.calcType=CALC_TYPE.FIXED }elseif( this.calcType===CALC_TYPE.FIXED&& this.fixedSizeValue!==size ){ this.calcType=CALC_TYPE.DYNAMIC //it'snouseatall deletethis.fixedSizeValue } //仅计算第一个范围内的平均大小 //如果是动态高度的情况下 if( this.calcType!==CALC_TYPE.FIXED&& typeofthis.firstRangeTotalSize!=='undefined' ){ //如果已经获取高度的数据比展示的总数据小的时候才计算 if( this.sizes.size Math.min(this.param.keeps,this.param.uniqueIds.length) ){ this.firstRangeTotalSize=[...this.sizes.values()].reduce( (acc,val)=acc+val, 0, ) //计算出来一个平均高度 this.firstRangeAverageSize=Math.round( this.firstRangeTotalSize/this.sizes.size, ) }else{ //拿到平均高度了，就干掉总高度 deletethis.firstRangeTotalSize } } } //insomespecialsituation(e.g.lengthchange)weneedtoupdateinarow //trygoiongtorendernextrangebyaleadingbufferaccordingtocurrentdirection handleDataSourcesChange(){ letstart=this.range.start if(this.isFront()){ start=start-LEADING_BUFFER }elseif(this.isBehind()){ start=start+LEADING_BUFFER } start=Math.max(start,0) this.updateRange(this.range.start,this.getEndByStart(start)) } //whenslotsizechange,wealsoneedforceupdate handleSlotSizeChange(){ this.handleDataSourcesChange() } //滚动计算范围 handleScroll(offset){ //计算方向也就是是朝上还是朝下滑动 this.direction= offsetthis.offset?DIRECTION_TYPE.FRONT:DIRECTION_TYPE.BEHIND //保存当前offset距离，为了判断下次是朝上还是朝下 this.offset=offset if(!this.param){ return } if(this.direction===DIRECTION_TYPE.FRONT){ //如果是朝上滑动 this.handleFront() }elseif(this.direction===DIRECTION_TYPE.BEHIND){ //如果是朝下滑动 this.handleBehind() } } //-----------publicmethodend----------- handleFront(){ constovers=this.getScrollOvers() //shouldnotchangerangeifstartdoesn'texceedovers if(oversthis.range.start){ return } //moveupstartbyabufferlength,andmakesureitssafety conststart=Math.max(overs-this.param.buffer,0) this.checkRange(start,this.getEndByStart(start)) } handleBehind(){ //获取偏移量所对饮的list constovers=this.getScrollOvers() //如果在缓冲区内滚动，范围不应改变，range是在每次滑动出缓冲区的时候更改 if(oversthis.range.start+this.param.buffer){ return } //也就是当overs大于当前的缓冲内容了，也就是到头了 //我们就开始启动检查机制，重新确定range //其实就是开辟新的缓冲区 this.checkRange(overs,this.getEndByStart(overs)) } //根据当前滚动偏移量返回传递值 getScrollOvers(){ //如果插槽标头存在，我们需要减去它的大小，为了兼容 constoffset=this.offset-this.param.slotHeaderSize if(offset=0){ return0 } //固定高度的itm很好办，直接用偏移量除以单独的宽度就行，就能得出挪上去了几个元素 if(this.isFixedType()){ returnMath.floor(offset/this.fixedSizeValue) } //非固定高度就麻烦了 letlow=0 letmiddle=0 letmiddleOffset=0 lethigh=this.param.uniqueIds.length //接下来就要有一套算法来解决问题了，求偏移了几个 while(low=high){ console.log(low,high) //this.__bsearchCalls++ //他这个算法应该属于二分法，通过二分法去求最接近偏移量的list条数 //获取二分居中内容，其实有可能跟总high一样 middle=low+Math.floor((high-low)/2) //获取居中条数的总偏移量 middleOffset=this.getIndexOffset(middle) //如果偏移量，等于当前偏移量 if(middleOffset===offset){ //中间位置数据返回 returnmiddle //还是利用二分法去找逐渐缩小距离 }elseif(middleOffsetoffset){ low=middle+1 }elseif(middleOffsetoffset){ high=middle-1 } } //最后是在没找到，就也是无限接近了 //因为如果只有大于才会给while干掉 //也就是在干掉的一瞬间他一定是最接近offset的那个值，并且根据动态高度，所形成的list条数 //之所以--是因为while不行了，所以，我们要回到他行的时候 returnlow0?--low:0 } //返回给定索引的滚动偏移量，这里可以进一步提高效率吗？ //虽然通话频率很高，但它只是数字的叠加 getIndexOffset(givenIndex){ //如果没有就返回0偏移量 if(!givenIndex){ return0 } //初始偏移量 letoffset=0 letindexSize=0 //遍历元素内容 for(letindex=0;indexgivenIndex;index++){ //this.__getIndexOffsetCalls++ //获取他们的高度 indexSize=this.sizes.get(this.param.uniqueIds[index]) //获取他准确的偏移量，只有前一部分有后续就没有了，所以就要按照前头计算的平均计算量去计算 //后续如果滑动完了，那么就会找到，能事实更正 offset= offset+ (typeofindexSize==='number'?indexSize:this.getEstimateSize()) } //记住上次计算指标这里计算是为了后续比较的时候用的 //因为有可能往上滑或者往下滑，所以每次要比较一下取最大值 this.lastCalcIndex=Math.max(this.lastCalcIndex,givenIndex-1) //或者跟总元素个数比较取最小的也就是lastCalcIndex不能比总元素数量小，这个math.min //之所以要取小，是为了兼容，lastCalcIndex可能大于最大数量的情况 //console.log(this.lastCalcIndex,this.getLastIndex()) //经过实践发现，好像前者永远不会大于后者,这个取值好像没用 this.lastCalcIndex=Math.min(this.lastCalcIndex,this.getLastIndex()) returnoffset } //isfixedsizetype isFixedType(){ returnthis.calcType===CALC_TYPE.FIXED } //returnthereallastindex getLastIndex(){ returnthis.param.uniqueIds.length-1 } //在某些情况下，范围被打破，我们需要纠正它 //然后决定是否需要更新到下一个范围 checkRange(start,end){ constkeeps=this.param.keeps consttotal=this.param.uniqueIds.length //小于keep的数据，全部呈现 //就是条数太少了，就没有必要搞烂七八糟的计算了 if(total=keeps){ start=0 end=this.getLastIndex() }elseif(end-startkeeps-1){ //如果范围长度小于keeps，则根据end进行校正 start=end-keeps+1 } //如果范围有问题，那么就需要重新更新范围 if(this.range.start!==start){ this.updateRange(start,end) } } //设置到新范围并重新渲染 updateRange(start,end){ this.range.start=start this.range.end=end this.range.padFront=this.getPadFront() this.range.padBehind=this.getPadBehind() //通知回调函数 console.log(this.getRange()) this.callUpdate(this.getRange()) } //这个其实就是基于他的开始位置，返回一个一定的位置 getEndByStart(start){ consttheoryEnd=start+this.param.keeps-1 //也有可能最后算出来的超出了当前的总数据量，所以要取小来搞定结束位置 consttruelyEnd=Math.min(theoryEnd,this.getLastIndex()) returntruelyEnd } //返回总前偏移 getPadFront(){ //固定高度的 if(this.isFixedType()){ returnthis.fixedSizeValue*this.range.start }else{ //非固定高度，在方法中用二分法，获取最接近的 returnthis.getIndexOffset(this.range.start) } } //计算总高度 getPadBehind(){ //获取初始end constend=this.range.end //获取总条数 constlastIndex=this.getLastIndex() //如果是fixed大小 if(this.isFixedType()){ return(lastIndex-end)*this.fixedSizeValue } //这是非固定高度 if(this.lastCalcIndex===lastIndex){ //如果之前滑动到过底部则返回精确的偏移量 returnthis.getIndexOffset(lastIndex)-this.getIndexOffset(end) }else{ //如果没有，请使用估计值 return(lastIndex-end)*this.getEstimateSize() } } //获取项目估计大小，兜底策略，防止高度为空的情况，拿他的默认高度 getEstimateSize(){ returnthis.isFixedType() ?this.fixedSizeValue :this.firstRangeAverageSize||this.param.estimateSize } } 以上代码中，就是对于虚拟滚动的封装，主要有关的就封装了那么几个方法 1、保存个更新 range 实时更新 padding2、展示保存总数据的高度信息3、兼容固定高度，和非固定高度的 item 类型4、一些用于通信的辅助函数接下来就很简单了我们初始化这个实例 //初始化虚拟滚动 constinstallVirtual=()={ //获取虚拟滚动所用实例 virtual=newVirtual( { slotHeaderSize:0, slotFooterSize:0, keeps:props.keeps, estimateSize:props.estimateSize, buffer:Math.round(props.keeps/3),//默认保留三分之一，也就是十条之所以保留三分之一，防止他还没划到地方就更改padding出现错误 uniqueIds:getUniqueIdFromDataSources(), }, //选区改变，重新生成选区 onRangeChanged, ) //获取选区这一步其实有点多此一举了 //range.value=virtual.getRange() } //在组件的初始渲染发生之前被调用。 onBeforeMount(()={ //初始化虚拟滚动 installVirtual() }) 监听滚动事件，根据virtual 中的实例 动态改变数据和更改 padding //list核心组件 exportdefaultdefineComponent({ name:'VirtualList', //props传值 props:VirtualProps, setup(props,{emit,slots,expose}){ //主渲染逻辑 constgetRenderSlots=()={ constslots=[] //由于在之前scroll中更改了范围的开始和结束 const{start,end}=range.value const{ dataSources, dataKey, itemClass, itemTag, itemStyle, extraProps, dataComponent, itemScopedSlots, }=props //开始遍历，当前内容 for(letindex=start;index=index++){ constdataSource=dataSources[index] if(dataSource){ constuniqueKey= typeofdataKey==='function' ?dataKey(dataSource) :dataSource[dataKey] if(typeofuniqueKey==='string'||typeofuniqueKey==='number'){ slots.push( //传入的内容，将内容放到item上，注意这个item是传入的 Item index={index} tag={itemTag} event={EVENT_TYPE.ITEM} horizontal={isHorizontal} uniqueKey={uniqueKey} source={dataSource} extraProps={extraProps} component={dataComponent} scopedSlots={itemScopedSlots} style={itemStyle} class={`${itemClass}${ props.itemClassAdd?''+props.itemClassAdd(index):'' }`} onItemResize={onItemResized} /, ) }else{ console.warn( `Cannotgetthedata-key'${dataKey}'fromdata-sources.`, ) } }else{ console.warn(`Cannotgettheindex'${index}'fromdata-sources.`) } } returnslots } //核心逻辑监听滚动事件 constonScroll=(evt)={ //获取距离顶部的距离 constoffset=getOffset() //获取视口宽度 constclientSize=getClientSize() //获取内容总高度 constscrollSize=getScrollSize() //iOS滚动回弹行为会造成方向错误，解决兼容bug if(offset0||offset+clientSizescrollSize+1||!scrollSize){ return } //处理滚动事件确定数据 virtual.handleScroll(offset) emitEvent(offset,clientSize,scrollSize,evt) } return()={ //拿到props const{ pageMode, rootTag:RootTag, wrapTag:WrapTag, wrapClass, wrapStyle, headerTag, headerClass, headerStyle, footerTag, footerClass, footerStyle, }=props //动态的更改paddingtop和paddingbottom //注意这个距离顶部的距离，和距离底部的距离，是根据在滑动的时候动态算出来的 const{padFront,padBehind}=range.value! constpaddingStyle={ padding:isHorizontal ?`0px${padBehind}px0px${padFront}px` :`${padFront}px0px${padBehind}px`, } constwrapperStyle=wrapStyle ?Object.assign({},wrapStyle,paddingStyle) :paddingStyle const{header,footer}=slots //jsx return( RootTagref={root}onScroll={!pageModeonScroll} {/*headerslot*/} {header( Slot class={headerClass} style={headerStyle} tag={headerTag} event={EVENT_TYPE.SLOT} uniqueKey={SLOT_TYPE.HEADER} onSlotResize={onSlotResized} {header()} /Slot )} {/*mainlist*/} WrapTagclass={wrapClass}style={wrapperStyle} //核心展示逻辑 {getRenderSlots()} /WrapTag {/*footerslot*/} {footer( Slot class={footerClass} style={footerStyle} tag={footerTag} event={EVENT_TYPE.SLOT} uniqueKey={SLOT_TYPE.FOOTER} onSlotResize={onSlotResized} {footer()} /Slot )} {/*anemptyelementusetoscrolltobottom*/} div ref={shepherd} style={{ width:isHorizontal?'0px':'100%', height:isHorizontal?'100%':'0px', }} / /RootTag ) } }, }) 以上核心代码中，主要就做了两件小事 1、 监听 scroll 事件，更改virtual实例的内容2、 根据virtual 的内容动态更改展示数据打完收工 最后这两种方案虽然都能提升性能，但各有千秋，因为，前者是无法规避 vue 内部的 diff 计算的 js 损耗 而后者，是无法规避每次滑动的渲染损耗 所以两瓶毒药，大家可自己斟酌,如果自己斟酌不了 「那就问领导！！！，如果他也搞不定，那他还当什么领导，让我来」 源码分析完了，如果有看不明白的 jy可以给我私信 至于怎么变成插件，我在之前的文章中已经写过了实用的VUE系列——手把手教你写个vue 插件(https://juejin.cn/post/7383548892627075087) 请移步学习！ 希望跟各位jym 共同进步！ 点击关注公众号，“技术干货”及时达！ 阅读原文