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

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

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

組件性能問題

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

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

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

絢麗多芬的火焰圖：

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

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

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

解決方案

既然是大數(shù)據(jù)量導致的，那么我們就控制一次性加載的數(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)的組件

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

<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值。