iView之Select組件的優化

jsbintask 發布于2019-08-22 16:42 / 664人閱讀

摘要：接下來本文會對比組件在性能上做出的優化。出現該問題的原因在組件的鉤子中有三個監聽，分別是組件添加，刪除，和選中時監聽事件。在監聽事件中會去遍歷當中的所有子組件做出相應的改變。

iView之Select組件在性能上的優化

????我們公司的組件庫是基于iView 比較早的版本修改后的僅供公司內部使用的組件庫，因此在使用的過程中就會遇到一些問題。接下來本文會對比Select組件在性能上做出的優化。

Debounce函數

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

鼠標的移動mousemove事件;window對象的resize、scroll事件;
keydown,keyup事件;

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

export function debounce(fn) {
    let waiting;
    return function() {
        if (waiting) return;
        waiting = true;
        const context = this,
            args = arguments;
        const later = function() {
            waiting = false;
            fn.apply(context, args);
        };
        this.$nextTick(later);
    };
}

這段代碼的意思的意思是當DOM更新后去響應這個事件，并且DOM更新后只會執行一次
有了這些知識的準備我們就可以來談談使用這個組件遇到的性能問題了。

低版本iviewSelect組件遇到的問題

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

出現該問題的原因

????在Select組件的mounted鉤子中有三個監聽，分別是組件添加，刪除，和選中時監聽事件。在監聽事件中會去遍歷Select當中的所有子組件做出相應的改變。

//監聽子組件的移除
this.$on("remove",() => {
    if (!this.remote) {
        this.modelToQuery();
        this.$nextTick(() => this.broadcastQuery(""));
    } else {
        this.findChild((child) => {
            child.updateSearchLabel();   // #1865
            child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
        });
    }
    this.slotChange();
    this.updateOptions(true);
})

查找這個監聽的通知對象發現正是Select的子組件在銷毀或者是創建時通知父組件做出相應的變化。

//組件銷毀時通知父組件
beforeDestroy () {
    this.dispatch("iSelect", "remove");
    this.$off("on-select-close", this.onSelectClose);
    this.$off("on-query-change",this.onQueryChange);
}

那么問題就出在這里了，當有大量的子組件時，每一個組件移除，父組件需要遍歷一次。這樣就拖累性能。

解決辦法

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

//select組件mounted函數當中去監聽 append 、remove 事件
this.$on("append", this.debouncedAppendRemove());
this.$on("remove", this.debouncedAppendRemove());
//引入debounce函數
debouncedAppendRemove(){
    return debounce(function(){
        if (!this.remote) {
            this.modelToQuery();
            this.$nextTick(() => this.broadcastQuery(""));
        } else {
            this.findChild((child) => {
                child.updateSearchLabel();   // #1865
                child.selected = this.multiple ? this.model.indexOf(child.value) > -1 : this.model === child.value;
            });
        }
        this.slotChange();
        this.updateOptions(true);
    });
}

其他細節

????低版本中子組件的監聽事件沒有移除掉，高版本的有移除。

mounted () {
    this.$on("on-select-close", this.onSelectClose);
    this.$on("on-query-change",this.onQueryChange);
}

beforeDestroy () {
    this.$off("on-select-close", this.onSelectClose);
    this.$off("on-query-change",this.onQueryChange);
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94586.html

VUE UI框架對比 element-ui 與 iView

摘要：而則是用到到指令結合的方式去生成，批量生成元素。表格操作列自定義渲染的時，使用的是的函數，直接在中插入對應模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項目UI框架在選型，做了個分析，不帶有任何利益相關）主要從以下幾個方面來做對比使用率（npm 平均下載頻率，組件數量，star, issue…)API風格打包優化與設計師友...

ZHAO_ 2019-08-20 17:25 評論0 收藏0
Vue高效UI組件庫—iView開發實踐

摘要：它的文檔也是相當詳細，每個功能都配有詳細說明和實例代碼，直接復制就可以使用，我們也計劃在明年啟動英文文檔翻譯計劃。明年會啟動英文文檔翻譯計劃，也希望喜歡和支持，同時英語不錯的同學可以加入我們，一起參與翻譯。前段時間在微軟參加活動，分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫 iView 的一些開發經驗，現整理成文，和大家探討。 showImg(htt...

wean 2019-08-21 14:43 評論0 收藏0
iView 近期的更新，以及那些“不為人知”的故事

摘要：如圖所示還有其它很多項的更新，比如新增屬性，可以設置面板展開時默認顯示的日期。目前最新版本支持鍵盤可訪問性的組件有。期待你的加入下個版本預告下個版本計劃重構組件，以全面支持表單組件的鍵盤可訪問性，敬請期待。在過去的兩個多月里，iView 陸續發布了 2.9.0 和 2.10.0 兩個重要版本。這兩個版本總共有 255 個 commit，超過 40 項更新。來看一下，iView 具體都...

UsherChen 2019-08-22 15:17 評論0 收藏0
iView 發布 3.0 版本，以及開發者社區等 5 款新產品

摘要：相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見，在上則常用于固定的側邊菜單項。開發者社區這是發布會最勁爆的一款產品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開了 iView 3...

FreeZinG 2019-08-23 10:31 評論0 收藏0