加速vue組件渲染之性能優(yōu)化
背景
平時在用vue開發(fā)后臺管理系統(tǒng)的時候，應(yīng)該會用到大量的table這種組件，正常這種組件我們會在項目里做二次封裝，然后針對表頭title做參數(shù)化配置，如下：
export default {
data(){
return {
tableTitle:[
{
label:'省份',
prop:'prop'
},
{
label:'城市',
prop:'prop'
},
{
label:'匯總',
prop:'prop',
colconfig:[
{
label:'下級',
prop:'prop'
}
]
}
...
]
}
}
}
此時如果table字段比較多而且是多表頭這種的話，數(shù)據(jù)結(jié)構(gòu)就比較復(fù)雜，如果直接寫在data里面的話，會在組件初始化時候，對此對象進(jìn)行遞歸重寫get set屬性，源碼如下：
function defineReactive(obj,key,val) {
var dep = new Dep();
var property = Object.getOwnPropertyDescriptor(obj, key);
//如果對象被凍結(jié)，則直接跳出，不重寫 get set方法
if (property && property.configurable === false) {
return
}
//observe會遞歸調(diào)用defineReactive，去重寫對象內(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ù)是不需要動態(tài)響應(yīng)的，這樣勢必會造浪性能浪費(fèi)，于是我們想辦法避免這種不必要的性能浪費(fèi)。
方案1
此時我們可以用Object.freeze()這個方法對此數(shù)據(jù)進(jìn)行凍結(jié)，vue組件在對data里的屬性攔截時，會判斷出被凍結(jié)的對象是不可被修改的【如上代碼注釋】，會直接跳過 get set的操作，這樣便可以降低vue組件的render時間，提升頁面性能
export default {
data(){
return {
tableTitle:Object.freeze(objConfig)
}
}
}
方案2
把我們不需要動態(tài)響應(yīng)的數(shù)據(jù)，在created的生命周期里面去定義，這樣vue底層就不會攔截到這個屬性了
export default {
created(){
this.tableTitle = [xxxxx]
}
}
總結(jié)
其實這種場景在開發(fā)中經(jīng)常遇到，比如查詢條件有很多selectlist字段，我們也可以把它封裝到一個大json里面，然后對其進(jìn)行避免重寫屬性，可以降低不少性能開銷
到此這篇關(guān)于加速vue組件渲染之性能優(yōu)化的文章就介紹到這了,更多相關(guān)vue組件渲染性能優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue之父子組件間通信實例講解(props、$ref、$emit)
組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現(xiàn)父子組件間通信。2018-05-05
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。今天我們來介紹VueJs 搭建Axios接口請求工具，需要的朋友參考下本文吧2017-11-11
element動態(tài)路由面包屑的實現(xiàn)示例
本文主要介紹了element動態(tài)路由面包屑的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
為了防止有人惡意使用腳本進(jìn)行批量操作,會設(shè)置圖片滑動驗證，本文就介紹了Vue.js圖片滑動驗證的實現(xiàn)示例，感興趣的可以了解一下2023-05-05
前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程
這篇文章主要為大家介紹了前端架構(gòu)vue動態(tài)組件使用的基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-02-02
本文主要介紹了vuex中Modules的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實現(xiàn)按需自動引入實例代碼
這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實現(xiàn)按需自動引入的相關(guān)資料,在Vue 3中可以通過配置vue.config.js文件來進(jìn)行按需自動引入,需要的朋友可以參考下2024-02-02