欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

背景

平時在用vue開發(fā)后臺管理系統(tǒng)的時候，應(yīng)該會用到大量的table這種組件，正常這種組件我們會在項(xiàng)目里做二次封裝，然后針對表頭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é)

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

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

相關(guān)文章

最新評論