iView之Select元件的優化

我們公司的元件庫是基於iview比較早的版本修改後的僅供公司內部使用的元件庫，因此在使用的過程中就會遇到一些問題。接下來本文會對比select元件在效能上做出的優化。

我們先來回顧一下debounce函式的使用場景：在前端頁面我們會遇到一些頻繁觸發的事件;比如

滑鼠的移動mousemove事件;

window物件的resize、scroll事件;

keydown,keyup事件;

實際的使用過程中我們可能不需要每次觸發事件的時候都去響應該事件，我們往往需要當使用者停止操作多少ms後去響應事件。這個時候我們就需要用到debounce函式了。下面是一段debounce函式

export function debounce(fn) ;
this.$nexttick(later);
};}

這段**的意思的意思是當dom更新後去響應這個事件，並且dom更新後只會執行一次

有了這些知識的準備我們就可以來談談使用這個元件遇到的效能問題了。

在使用低版本的元件過程中，當資料量很大例如某個select選擇器裡面有500條甚至更多的資料時，進行模糊搜尋有可能卡死頁面，關閉頁面有延遲。

在select元件的mounted鉤子中有三個監聽，分別是元件新增，刪除，和選中時監聽事件。在監聽事件中會去遍歷select當中的所有子元件做出相應的改變。

//監聽子元件的移除
this.$on('remove',() =>  else );
}this.slotchange();
this.updateoptions(true);
})

查詢這個監聽的通知物件發現正是select的子元件在銷毀或者是建立時通知父元件做出相應的變化。

//元件銷毀時通知父元件
beforedestroy ()

那麼問題就出在這裡了，當有大量的子元件時，每乙個元件移除，父元件需要遍歷一次。這樣就拖累效能。

既然前面提到debounce函式，想必大家應該想到要怎麼解決了。使用debounce函式能夠解決這個問題，我們只需要所有子元件銷毀時通知父元件一次就夠了。引入debounce函式後經本人測試基本上解決了卡頓以及卡死的問題，**如下。

//引入debounce函式

return debounce(function() else );

}this.slotchange();

this.updateoptions(true);

});}低版本中子元件的監聽事件沒有移除掉，高版本的有移除。

mounted () 
beforedestroy ()