亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

加速vue組件渲染之性能優(yōu)化

 更新時(shí)間：2020年04月09日 09:57:01   作者：since911  
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

平時(shí)在用vue開發(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ù)雜，如果直接寫在data里面的話，會(huì)在組件初始化時(shí)候，對(duì)此對(duì)象進(jìn)行遞歸重寫get set屬性，源碼如下：

function defineReactive(obj,key,val) {
 var dep = new Dep();
 var property = Object.getOwnPropertyDescriptor(obj, key);
 //如果對(duì)象被凍結(jié)，則直接跳出，不重寫 get set方法
 if (property && property.configurable === false) {
  return
 }
 //observe會(huì)遞歸調(diào)用defineReactive，去重寫對(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ì)直接跳過 get set的操作，這樣便可以降低vue組件的render時(shí)間，提升頁面性能

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)景在開發(fā)中經(jīng)常遇到，比如查詢條件有很多selectlist字段，我們也可以把它封裝到一個(gè)大json里面，然后對(duì)其進(jìn)行避免重寫屬性，可以降低不少性能開銷

到此這篇關(guān)于加速vue組件渲染之性能優(yōu)化的文章就介紹到這了,更多相關(guān)vue組件渲染性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論