快捷導(dǎo)航

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

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

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

組件性能問題

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

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

密密麻麻的節(jié)點：

絢麗多芬的火焰圖：

從上面的火焰圖可知卡頓的click時間，渲染時間的非常的嚴重。

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

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

解決方案

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

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

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

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

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

<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é)果顯而易見?；鹧鎴D不夠紅火了！不再卡頓。

實現(xiàn)原理

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章: