您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”吧!
在Vue源碼中會把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ù)時,會觸發(fā)getter函數(shù),在其中通過 var value = getter ? getter.call(obj) : val; 獲取到值后執(zhí)行 return value,實現(xiàn)讀取數(shù)據(jù)的目的。
但是在其間還有一段代碼,在這段代碼中會經(jīng)過一系列復(fù)雜的邏輯運算來收集依賴。這里只要知道在Dep.target存在時才會去收集依賴。
這里可以得出一個結(jié)論,在Dep.target存在時,使用this去讀取data中數(shù)據(jù)時會去收集依賴。如果濫用this去讀取data中數(shù)據(jù),會多次重復(fù)地收集依賴,從而產(chǎn)生性能問題。
Dep.target是由依賴賦值的。依賴又稱為Watcher(偵聽者)或者訂閱者。在Vue中有三種依賴,其中兩種是很常見的,就是watch(偵聽器)和computed(計算屬性)。還有一種隱藏的依賴———渲染W(wǎng)atcher,在模板首次渲染的過程中創(chuàng)建的。
Dep.target是在依賴創(chuàng)建時被賦值,依賴是用構(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最后會執(zhí)行實例方法get,在實例方法get中執(zhí)行pushTarget(this)中給Dep.target賦值的。
而依賴是在Vue頁面或組件初次渲染時創(chuàng)建,所以產(chǎn)生的性能問題應(yīng)該是首次渲染過慢的問題。
在Dep.target存在時去執(zhí)行這些濫用this去讀取data中數(shù)據(jù)的代碼會產(chǎn)生性能問題,故還要搞清楚這些代碼是寫在哪里才會被執(zhí)行到,換句話來說,要搞清楚在哪里濫用this去讀取data中數(shù)據(jù)會產(chǎn)生性能問題。
在第二小節(jié)中介紹了Dep.target被賦值后會執(zhí)行value = this.getter.call(vm, vm),其中this.getter是一個函數(shù),那么若在其中有用this去讀取data數(shù)據(jù),就會去收集依賴,假如濫用的話就會產(chǎn)生性能問題。
this.getter是在創(chuàng)建依賴過程中賦值的,每種依賴的this.getter都是不相同的。下面來一一介紹。
watch(偵聽器)依賴的this.getter是parsePath函數(shù),其函數(shù)參數(shù)就是偵聽的對象。
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ù)會返回一個函數(shù)賦值給this.getter,執(zhí)行this.getter.call(vm, vm)會得到this.a和this.a.b.c的值。在這個過程中不會存在濫用this去讀取data中數(shù)據(jù)的場景。
watch:{ a:function(newVal, oldVal){ //做點什么 } } vm.$watch('a.b.c', function (newVal, oldVal) { // 做點什么 })
computed(計算屬性)依賴的this.getter有兩種,如果計算屬性的值是個函數(shù),那么this.getter就是這個函數(shù)。如果計算屬性的值是個對象,那么this.getter就是這個對象的get屬性值,get屬性值也是個函數(shù)。在這個函數(shù)可能會存在濫用this去讀取data中數(shù)據(jù)的場景,舉個例子,代碼如下所示。
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; } }
在計算屬性d中就存在濫用this去讀取data數(shù)據(jù)。其中this.a是個數(shù)組,此時Dep.target的值為計算屬性d這個依賴,在循環(huán)this.a中使用this去獲取中a、b、c、e、f的數(shù)據(jù),使這些數(shù)據(jù)進行一系列復(fù)雜的邏輯運算來重復(fù)地收集計算屬性d這個依賴。導(dǎo)致獲取計算屬性d的值的速度變慢,從而產(chǎn)生性能問題。
渲染W(wǎng)atcher的this.getter是一個函數(shù)如下所示:
updateComponent = function() { vm._update(vm._render(), hydrating); };
其中vm._render()會把template模板生成的渲染函數(shù)render轉(zhuǎn)成虛擬DOM(VNode):vnode = render.call(vm._renderProxy, vm.$createElement);,舉一個例子來說明一下渲染函數(shù)render是什么。
例如template模板:
<template> <div class="wrap"> <p>{{a}}<span>{}</span></p> </div> </template>
通過vue-loader會生成渲染函數(shù)render,如下所示:
(function anonymous() { with(this) { return _c('div', { attrs: { "class": "wrap" } }, [_c('p', [_v(_s(a)), _c('span', [_v(_s(b))])])]) } })
其中with語句的作用是為一個或一組語句指定默認對象,例with(this){ a + b } 等同 this.a + this.b,那么在template模板中使用{{ a }}相當使用this去讀取data中的a數(shù)據(jù)。故在template模板生成的渲染函數(shù)render中也可能存在濫用this去讀取data中數(shù)據(jù)的場景。舉個例子,代碼如下所示:
<template> <div class="wrap"> <div v-for=item in list> <div> {{ arr[item.index]['name'] }} </div> <div> {{ obj[item.id]['age'] }} </div> </div> </div> </template>
其中用v-for循環(huán)list數(shù)組過程中,不斷用this去讀取data中arr、obj的數(shù)據(jù),使這些數(shù)據(jù)進行一系列復(fù)雜的邏輯運算來重復(fù)收集這個依賴,導(dǎo)致初次渲染的速度變慢,從而產(chǎn)生性能問題。
綜上所述在計算屬性和template模板中濫用this去讀取data中數(shù)據(jù)會導(dǎo)致多次重復(fù)地收集依賴,從而產(chǎn)生性能問題,那要怎么避免這種情況。
計算屬性中如何避免
用ES6對象解構(gòu)賦值來避免,計算屬性的值是一個函數(shù),其參數(shù)是Vue的實例化this對象,在上述計算屬性中濫用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賦值給對應(yīng)的變量a、b、c、e、f,然后在計算屬性中可以通過這些變量訪問data數(shù)據(jù)的,且不會觸發(fā)data中對應(yīng)數(shù)據(jù)的依賴收集。這樣只用this讀取了一次data中的數(shù)據(jù),只觸發(fā)了一次依賴收集,避免了多次重復(fù)地依賴收集產(chǎn)生的性能問題。
template模板中如何避免
提前處理v-for循環(huán)所用的數(shù)據(jù),不要在v-for循環(huán)中去讀取數(shù)組、對象類型的數(shù)據(jù)。在上述template模板中濫用this的例子中可以這樣優(yōu)化。
假設(shè)list、arr、obj皆是服務(wù)端返回來的數(shù)據(jù),且arr和obj沒有用到任何模塊渲染中,可以這樣優(yōu)化。
優(yōu)化前:
<template> <div class="wrap"> <div v-for=item in list> <div> {{ arr[item.index]['name'] }} </div> <div> {{ obj[item.id]['age'] }} </div> </div> </div> </template>
優(yōu)化后:
<template> <div class="wrap"> <div v-for=item in listData> <div{{item.name}} </div> <div>{{item.age}}</div> </div> </div> </template> <script> export default { data() { return { list: [], } }, created(){ // 在這里定義arr和obj避免被轉(zhuǎn)成響應(yīng)式 this.arr = []; this.obj = {}; }, computed: { listData: function ({list}) { list.forEach(item => { item.name = this.arr[item.index].name; item.age = this.obj[item.id].age; }) return list; } }, } </script>
感謝各位的閱讀,以上就是“Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Vue中避免濫用this去讀取data中數(shù)據(jù)的方法是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。