這篇文章主要講解了“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”吧！

創(chuàng)新互聯(lián)網(wǎng)絡(luò)公司擁有10多年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，1000+客戶的共同信賴。提供網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)站定制、買鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

一、用this讀取data中數(shù)據(jù)的過程

在Vue源碼中會(huì)把data中數(shù)據(jù)添加getter函數(shù)和setter函數(shù)，將其轉(zhuǎn)成響應(yīng)式的。getter函數(shù)代碼如下所示：

function reactiveGetter() {      var value = getter ? getter.call(obj) : val;      if (Dep.target) {          dep.depend();          if (childOb) {              childOb.dep.depend();              if (Array.isArray(value)) {                  dependArray(value);              }         }      }      return value  }

用this讀取data中數(shù)據(jù)時(shí)，會(huì)觸發(fā)getter函數(shù)，在其中通過 var value = getter ? getter.call(obj) : val; 獲取到值后執(zhí)行 return value，實(shí)現(xiàn)讀取數(shù)據(jù)的目的。

但是在其間還有一段代碼，在這段代碼中會(huì)經(jīng)過一系列復(fù)雜的邏輯運(yùn)算來收集依賴。這里只要知道在Dep.target存在時(shí)才會(huì)去收集依賴。

  這里可以得出一個(gè)結(jié)論，在Dep.target存在時(shí)，使用this去讀取data中數(shù)據(jù)時(shí)會(huì)去收集依賴。如果濫用this去讀取data中數(shù)據(jù)，會(huì)多次重復(fù)地收集依賴，從而產(chǎn)生性能問題。

二、Dep.target什么時(shí)候存在

Dep.target是由依賴賦值的。依賴又稱為Watcher（偵聽者）或者訂閱者。在Vue中有三種依賴，其中兩種是很常見的，就是watch（偵聽器）和computed（計(jì)算屬性）。還有一種隱藏的依賴———渲染W(wǎng)atcher，在模板首次渲染的過程中創(chuàng)建的。

Dep.target是在依賴創(chuàng)建時(shí)被賦值，依賴是用構(gòu)造函數(shù)Watcher創(chuàng)建。

lue = this.lazy ? undefined : this.get();  };  Watcher.prototype.get = function get() {      pushTarget(this);      try {          value = this.getter.call(vm, vm);      } catch (e) {            }function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {      //...      if (typeof expOrFn === 'function') {          this.getter = expOrFn;      } else {          this.getter = parsePath(expOrFn);      }      this.va      return value  };  Dep.target = null;  var targetStack = [];  function pushTarget(target) {      targetStack.push(target);      Dep.target = target;  }

在構(gòu)造函數(shù)Watcher最后會(huì)執(zhí)行實(shí)例方法get，在實(shí)例方法get中執(zhí)行pushTarget(this)中給Dep.target賦值的。

而依賴是在Vue頁面或組件初次渲染時(shí)創(chuàng)建，所以產(chǎn)生的性能問題應(yīng)該是首次渲染過慢的問題。

三、在何處濫用this去讀取data中數(shù)據(jù)

在Dep.target存在時(shí)去執(zhí)行這些濫用this去讀取data中數(shù)據(jù)的代碼會(huì)產(chǎn)生性能問題，故還要搞清楚這些代碼是寫在哪里才會(huì)被執(zhí)行到，換句話來說，要搞清楚在哪里濫用this去讀取data中數(shù)據(jù)會(huì)產(chǎn)生性能問題。

在第二小節(jié)中介紹了Dep.target被賦值后會(huì)執(zhí)行value = this.getter.call(vm, vm)，其中this.getter是一個(gè)函數(shù)，那么若在其中有用this去讀取data數(shù)據(jù)，就會(huì)去收集依賴，假如濫用的話就會(huì)產(chǎn)生性能問題。

this.getter是在創(chuàng)建依賴過程中賦值的，每種依賴的this.getter都是不相同的。下面來一一介紹。

•  watch（偵聽器）依賴的this.getter是parsePath函數(shù)，其函數(shù)參數(shù)就是偵聽的對(duì)象。 

var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));  function parsePath(path) {    if (bailRE.test(path)) {        return    }    var segments = path.split('.');    return function(obj) {        for (var i = 0; i < segments.length; i++) {            if (!obj) {                return            }           objobj = obj[segments[i]];        }        return obj    }  }

如下所示的代碼中的 a 和 a.b.c作為參數(shù)傳入parsePath函數(shù)會(huì)返回一個(gè)函數(shù)賦值給this.getter，執(zhí)行this.getter.call(vm, vm)會(huì)得到this.a和this.a.b.c的值。在這個(gè)過程中不會(huì)存在濫用this去讀取data中數(shù)據(jù)的場景。 

watch:{     a:function(newVal, oldVal){       //做點(diǎn)什么    }     }     vm.$watch('a.b.c', function (newVal, oldVal) {     // 做點(diǎn)什么     })

•  computed（計(jì)算屬性）依賴的this.getter有兩種，如果計(jì)算屬性的值是個(gè)函數(shù)，那么this.getter就是這個(gè)函數(shù)。如果計(jì)算屬性的值是個(gè)對(duì)象，那么this.getter就是這個(gè)對(duì)象的get屬性值，get屬性值也是個(gè)函數(shù)。在這個(gè)函數(shù)可能會(huì)存在濫用this去讀取data中數(shù)據(jù)的場景，舉個(gè)例子，代碼如下所示。   

computed:{       d:function(){           let result = 0;           for(let key in this.a){               if(this.a[key].num > 20){                   result += this.a[key].num + this.b + this.c;               }else{                   result += this.a[key].num + this.e + this.f;               }          }           return result;       }     }

在計(jì)算屬性d中就存在濫用this去讀取data數(shù)據(jù)。其中this.a是個(gè)數(shù)組，此時(shí)Dep.target的值為計(jì)算屬性d這個(gè)依賴，在循環(huán)this.a中使用this去獲取中a、b、c、e、f的數(shù)據(jù)，使這些數(shù)據(jù)進(jìn)行一系列復(fù)雜的邏輯運(yùn)算來重復(fù)地收集計(jì)算屬性d這個(gè)依賴。導(dǎo)致獲取計(jì)算屬性d的值的速度變慢，從而產(chǎn)生性能問題。

•   渲染W(wǎng)atcher的this.getter是一個(gè)函數(shù)如下所示： 

updateComponent = function() {    vm._update(vm._render(), hydrating);  };

其中vm._render()會(huì)把template模板生成的渲染函數(shù)render轉(zhuǎn)成虛擬DOM（VNode）：vnode = render.call(vm._renderProxy, vm.$createElement);，舉一個(gè)例子來說明一下渲染函數(shù)render是什么。

例如template模板：

通過vue-loader會(huì)生成渲染函數(shù)render，如下所示：

(function anonymous() {      with(this) {          return _c('div', {              attrs: {                  "class": "wrap"              }          }, [_c('p', [_v(_s(a)), _c('span', [_v(_s(b))])])])      }  })

其中with語句的作用是為一個(gè)或一組語句指定默認(rèn)對(duì)象，例with(this){ a + b } 等同 this.a + this.b，那么在template模板中使用{{ a }}相當(dāng)使用this去讀取data中的a數(shù)據(jù)。故在template模板生成的渲染函數(shù)render中也可能存在濫用this去讀取data中數(shù)據(jù)的場景。舉個(gè)例子，代碼如下所示：

其中用v-for循環(huán)list數(shù)組過程中，不斷用this去讀取data中arr、obj的數(shù)據(jù)，使這些數(shù)據(jù)進(jìn)行一系列復(fù)雜的邏輯運(yùn)算來重復(fù)收集這個(gè)依賴，導(dǎo)致初次渲染的速度變慢，從而產(chǎn)生性能問題。

四、如何避免濫用this去讀取data中數(shù)據(jù)

綜上所述在計(jì)算屬性和template模板中濫用this去讀取data中數(shù)據(jù)會(huì)導(dǎo)致多次重復(fù)地收集依賴，從而產(chǎn)生性能問題，那要怎么避免這種情況。

•  計(jì)算屬性中如何避免

用ES6對(duì)象解構(gòu)賦值來避免，計(jì)算屬性的值是一個(gè)函數(shù)，其參數(shù)是Vue的實(shí)例化this對(duì)象，在上述計(jì)算屬性中濫用this的例子中可以這樣優(yōu)化。

優(yōu)化前：

computed:{      d:function(){          let result = 0;          for(let key in this.a){              if(this.a[key].num > 20){                  result += this.a[key].num + this.b + this.c;              }else{                  result += this.a[key].num + this.e + this.f;              }          }          return result;      }  }

優(yōu)化后：

computed: {    d({ a, b, c, e, f }) {      let result = 0;      for (let key in a) {        if (a[key].num > 20) {          result += a[key].num + b + c;        } else {          result += a[key].num + e + f;        }      }      return result;    }  }

以上利用解構(gòu)賦值提前把data數(shù)據(jù)中的a、b、c、e、f賦值給對(duì)應(yīng)的變量a、b、c、e、f，然后在計(jì)算屬性中可以通過這些變量訪問data數(shù)據(jù)的，且不會(huì)觸發(fā)data中對(duì)應(yīng)數(shù)據(jù)的依賴收集。這樣只用this讀取了一次data中的數(shù)據(jù)，只觸發(fā)了一次依賴收集，避免了多次重復(fù)地依賴收集產(chǎn)生的性能問題。

•  template模板中如何避免

提前處理v-for循環(huán)所用的數(shù)據(jù)，不要在v-for循環(huán)中去讀取數(shù)組、對(duì)象類型的數(shù)據(jù)。在上述template模板中濫用this的例子中可以這樣優(yōu)化。

假設(shè)list、arr、obj皆是服務(wù)端返回來的數(shù)據(jù)，且arr和obj沒有用到任何模塊渲染中，可以這樣優(yōu)化。

優(yōu)化前：

優(yōu)化后：

感謝各位的閱讀，以上就是“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！