加速vue組件渲染之性能優化

背景

平時在用vue開發后台管理系統的時候，應該會用到大量的table這種組件，正常這種組件我們會在項目里做二次封裝，然后針對表頭title做參數化配置，如下：

export default { data(){ return { tableTitle:[ { label:'省份', prop:'prop' }, { label:'城市', prop:'prop' }, { label:'匯總', prop:'prop', colconfig:[ { label:'下級', prop:'prop' } ] } ... ] } } }

此時如果table字段比較多而且是多表頭這種的話，數據結構就比較復雜，如果直接寫在data里面的話，會在組件初始化時候，對此對象進行遞歸重寫get set屬性，源碼如下：

function definereactive(obj,key,val) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(obj, key); //如果對象被凍結，則直接跳出，不重寫 get set方法 if (property && property.configurable === false) { return } //observe會遞歸調用definereactive，去重寫對象內層的get set屬性 var childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { }, set: function reactiveSetter (newVal) { } }); } 

然而這種靜態數據是不需要動態響應的，這樣勢必會造浪性能浪費，於是我們想辦法避免這種不必要的性能浪費。

 

方案1

此時我們可以用Object.freeze()這個方法對此數據進行凍結，vue組件在對data里的屬性攔截時，會判斷出被凍結的對象是不可被修改的【如上代碼注釋】，會直接跳過 get set的操作，這樣便可以降低vue組件的render時間，提升頁面性能

export default {

data(){
 return {
 tableTitle:Object.freeze(objConfig)
 }
}
}

廣州包裝設計公司http://www.maiqicn.com 電腦刺綉綉花廠 ttp://www.szhdn.com

方案2

把我們不需要動態響應的數據，在created的生命周期里面去定義，這樣vue底層就不會攔截到這個屬性了

export default { created(){ this.tableTitle = [xxxxx] } }

 

總結

其實這種場景在開發中經常遇到，比如查詢條件有很多selectlist字段，我們也可以把它封裝到一個大json里面，然后對其進行避免重寫屬性，可以降低不少性能開銷