快捷導(dǎo)航

vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解

更新時(shí)間：2023年02月18日 11:59:06 作者：砂糖橘加鹽

這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

組件性能問題

在數(shù)據(jù)量大的時(shí)候，cascader/tree這類的列表加載緩慢，滾動(dòng)卡頓，操作延遲。

下圖是2000條數(shù)據(jù)的時(shí)候：

密密麻麻的節(jié)點(diǎn)：

絢麗多芬的火焰圖：

從上面的火焰圖可知卡頓的click時(shí)間，渲染時(shí)間的非常的嚴(yán)重。

影響cascader/tree這類組件性能的主要原因：

一次性加載出所有的dom節(jié)點(diǎn)，導(dǎo)致首次加載緩慢
組件中有一個(gè)computed屬性：checkedValue。這個(gè)變量觸發(fā)任何一個(gè)click事件的時(shí)候，都會(huì)改變這個(gè)變量。cascader源碼當(dāng)中，會(huì)因?yàn)檫@個(gè)值的改變觸發(fā)render方法，導(dǎo)致JS執(zhí)行時(shí)間、重繪和重排的時(shí)間都很長。

解決方案

既然是大數(shù)據(jù)量導(dǎo)致的，那么我們就控制一次性加載的數(shù)據(jù)，這個(gè)時(shí)候自然想到使用虛擬滾動(dòng)。github搜索下，搜索到了vue-virtual-scroll-list組件。

npm install vue-virtual-scroll-list --save

具體用法可以自行查看官網(wǎng)。主要是下面三個(gè)參數(shù)：

data-key: 配置循環(huán)的組件子組件的唯一ID
data-source: 數(shù)組
data-component: 待循環(huán)的組件

個(gè)人更加喜歡像下面這樣的組件設(shè)計(jì)：

<el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
</el-select>

顯性的子組件和v-for，以及直觀的key值。

優(yōu)化后的表現(xiàn)

結(jié)果顯而易見。火焰圖不夠紅火了！不再卡頓。

實(shí)現(xiàn)原理

那么它的實(shí)現(xiàn)原理是什么呢？

下面是一張3d圖，表示了數(shù)據(jù)實(shí)際展示的范圍。

由此可知，根據(jù)滾動(dòng)容器元素的可視窗口來渲染長列表中的部分?jǐn)?shù)據(jù)。利用視差和錯(cuò)覺制作一份出一份“虛擬”列表，一個(gè)虛擬列表由三部分組成：

視窗口
虛擬數(shù)據(jù)列表（數(shù)據(jù)展示）
滾動(dòng)占位區(qū)塊（底部滾動(dòng)區(qū)

它的實(shí)現(xiàn)思路：

根據(jù)該圖可以得到下面這樣的思維導(dǎo)圖：

總結(jié)

到此這篇關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的文章就介紹到這了,更多相關(guān)vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: