加速vue組件渲染之性能優(yōu)化
背景
平時(shí)在用vue開(kāi)發(fā)后臺(tái)管理系統(tǒng)的時(shí)候，應(yīng)該會(huì)用到大量的table這種組件，正常這種組件我們會(huì)在項(xiàng)目里做二次封裝，然后針對(duì)表頭title做參數(shù)化配置，如下：
export default {
data(){
return {
tableTitle:[
{
label:'省份',
prop:'prop'
},
{
label:'城市',
prop:'prop'
},
{
label:'匯總',
prop:'prop',
colconfig:[
{
label:'下級(jí)',
prop:'prop'
}
]
}
...
]
}
}
}
此時(shí)如果table字段比較多而且是多表頭這種的話，數(shù)據(jù)結(jié)構(gòu)就比較復(fù)雜，如果直接寫(xiě)在data里面的話，會(huì)在組件初始化時(shí)候，對(duì)此對(duì)象進(jìn)行遞歸重寫(xiě)get set屬性，源碼如下：
function defineReactive(obj,key,val) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
//如果對(duì)象被凍結(jié)，則直接跳出，不重寫(xiě) get set方法
if (property && property.configurable === false) {
return
}
//observe會(huì)遞歸調(diào)用defineReactive，去重寫(xiě)對(duì)象內(nèi)層的get set屬性
var childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
},
set: function reactiveSetter (newVal) {
}
});
}
然而這種靜態(tài)數(shù)據(jù)是不需要?jiǎng)討B(tài)響應(yīng)的，這樣勢(shì)必會(huì)造浪性能浪費(fèi)，于是我們想辦法避免這種不必要的性能浪費(fèi)。
方案1
此時(shí)我們可以用Object.freeze()這個(gè)方法對(duì)此數(shù)據(jù)進(jìn)行凍結(jié)，vue組件在對(duì)data里的屬性攔截時(shí)，會(huì)判斷出被凍結(jié)的對(duì)象是不可被修改的【如上代碼注釋】，會(huì)直接跳過(guò) get set的操作，這樣便可以降低vue組件的render時(shí)間，提升頁(yè)面性能
export default {
data(){
return {
tableTitle:Object.freeze(objConfig)
}
}
}
方案2
把我們不需要?jiǎng)討B(tài)響應(yīng)的數(shù)據(jù)，在created的生命周期里面去定義，這樣vue底層就不會(huì)攔截到這個(gè)屬性了
export default {
created(){
this.tableTitle = [xxxxx]
}
}
總結(jié)
其實(shí)這種場(chǎng)景在開(kāi)發(fā)中經(jīng)常遇到，比如查詢條件有很多selectlist字段，我們也可以把它封裝到一個(gè)大json里面，然后對(duì)其進(jìn)行避免重寫(xiě)屬性，可以降低不少性能開(kāi)銷
到此這篇關(guān)于加速vue組件渲染之性能優(yōu)化的文章就介紹到這了,更多相關(guān)vue組件渲染性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開(kāi)瀏覽器配置
這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開(kāi)瀏覽器配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+elementUI中使用Echarts之餅圖問(wèn)題
這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
2種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法
在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法，非常實(shí)用，一起來(lái)學(xué)習(xí)下。2018-09-09
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue 實(shí)例中使用$refs的注意事項(xiàng)
這篇文章主要介紹了Vue 實(shí)例中使用$refs的注意事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-01-01
npm無(wú)法加載文件：因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的解決辦法
這篇文章主要介紹了npm無(wú)法加載文件：因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本問(wèn)題的解決辦法,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01![解決antd 下拉框 input [defaultValue] 的值的問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg6.png)
解決antd 下拉框 input [defaultValue] 的值的問(wèn)題
這篇文章主要介紹了解決antd 下拉框 input [defaultValue] 的值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)
這篇文章主要介紹了Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實(shí)現(xiàn)原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05