前言
在Vue中，data選項是個好東西，把數據往里一丟，在一個Vue組件中任何一個地方都可以通過this來讀取data中數據。但是要避免濫用this去讀取data中數據，至于在哪里要避免濫用，如果濫用會導致什么后果，本專欄將會一一揭曉。
一、用this讀取data中數據的過程
在Vue源碼中會把data中數據添加getter函數和setter函數，將其轉成響應式的。getter函數代碼如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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中數據時，會觸發getter函數，在其中通過 var value = getter ? getter.call(obj) : val; 獲取到值后執行 return value，實現讀取數據的目的。
這里可以得出一個結論，在Dep.target存在時，使用this去讀取data中數據時會去收集依賴。如果濫用this去讀取data中數據，會多次重復地收集依賴，從而產生性能問題。
二、Dep.target什么時候存在
Dep.target是由依賴賦值的。依賴又稱為Watcher（偵聽者）或者訂閱者。在Vue中有三種依賴，其中兩種是很常見的，就是watch（偵聽器）和computed（計算屬性）。還有一種隱藏的依賴———渲染Watcher，在模板首次渲染的過程中創建的。
Dep.target是在依賴創建時被賦值，依賴是用構造函數Watcher創建。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function Watcher(vm, expOrFn, cb, options, isRenderWatcher) { //... if (typeof expOrFn === 'function') { this.getter = expOrFn; } else { this.getter = parsePath(expOrFn); } this.value = this.lazy ? undefined : this.get();};Watcher.prototype.get = function get() { pushTarget(this); try { value = this.getter.call(vm, vm); } catch (e) { } return value};Dep.target = null;var targetStack = [];function pushTarget(target) { targetStack.push(target); Dep.target = target;} |
在構造函數Watcher最后會執行實例方法get，在實例方法get中執行pushTarget(this)中給Dep.target賦值的。
而依賴是在Vue頁面或組件初次渲染時創建，所以產生的性能問題應該是首次渲染過慢的問題。
三、在何處濫用this去讀取data中數據
在Dep.target存在時去執行這些濫用this去讀取data中數據的代碼會產生性能問題，故還要搞清楚這些代碼是寫在哪里才會被執行到，換句話來說，要搞清楚在哪里濫用this去讀取data中數據會產生性能問題。
在第二小節中介紹了Dep.target被賦值后會執行value = this.getter.call(vm, vm)，其中this.getter是一個函數，那么若在其中有用this去讀取data數據，就會去收集依賴，假如濫用的話就會產生性能問題。
this.getter是在創建依賴過程中賦值的，每種依賴的this.getter都是不相同的。下面來一一介紹。
-
watch（偵聽器）依賴的
this.getter是parsePath函數，其函數參數就是偵聽的對象。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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 } obj = obj[segments[i]]; } return obj }} |
如下所示的代碼中的 a 和 a.b.c作為參數傳入parsePath函數會返回一個函數賦值給this.getter，執行this.getter.call(vm, vm)會得到this.a和this.a.b.c的值。在這個過程中不會存在濫用this去讀取data中數據的場景。
|
1
2
3
4
5
6
7
8
|
watch:{ a:function(newVal, oldVal){ //做點什么 }}vm.$watch('a.b.c', function (newVal, oldVal) { // 做點什么}) |
-
computed（計算屬性）依賴的
this.getter有兩種，如果計算屬性的值是個函數，那么this.getter就是這個函數。如果計算屬性的值是個對象，那么this.getter就是這個對象的get屬性值，get屬性值也是個函數。在這個函數可能會存在濫用this去讀取data中數據的場景，舉個例子，代碼如下所示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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數據。其中this.a是個數組，此時Dep.target的值為計算屬性d這個依賴，在循環this.a中使用this去獲取中a、b、c、e、f的數據，使這些數據進行一系列復雜的邏輯運算來重復地收集計算屬性d這個依賴。導致獲取計算屬性d的值的速度變慢，從而產生性能問題。
-
渲染Watcher的
this.getter是一個函數如下所示：
|
1
2
3
|
updateComponent = function() { vm._update(vm._render(), hydrating);}; |
其中vm._render()會把template模板生成的渲染函數render轉成虛擬DOM（VNode）：vnode = render.call(vm._renderProxy, vm.$createElement);，舉一個例子來說明一下渲染函數render是什么。
例如template模板：
|
1
2
3
4
5
|
<template> <div class="wrap"> <p>{{a}}<span>{}</span></p> </div></template> |
通過vue-loader會生成渲染函數render，如下所示：
|
1
2
3
4
5
6
7
8
9
|
(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數據。故在template模板生成的渲染函數render中也可能存在濫用this去讀取data中數據的場景。舉個例子，代碼如下所示：
|
1
2
3
4
5
6
7
8
|
<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循環list數組過程中，不斷用this去讀取data中arr、obj的數據，使這些數據進行一系列復雜的邏輯運算來重復收集這個依賴，導致初次渲染的速度變慢，從而產生性能問題。
四、如何避免濫用this去讀取data中數據
綜上所述在計算屬性和template模板中濫用this去讀取data中數據會導致多次重復地收集依賴，從而產生性能問題，那要怎么避免這種情況。
- 計算屬性中如何避免
用ES6對象解構賦值來避免，計算屬性的值是一個函數，其參數是Vue的實例化this對象，在上述計算屬性中濫用this的例子中可以這樣優化。
優化前：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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; }} |
優化后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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; }} |
以上利用解構賦值提前把data數據中的a、b、c、e、f賦值給對應的變量a、b、c、e、f，然后在計算屬性中可以通過這些變量訪問data數據的，且不會觸發data中對應數據的依賴收集。這樣只用this讀取了一次data中的數據，只觸發了一次依賴收集，避免了多次重復地依賴收集產生的性能問題。
- template模板中如何避免
提前處理v-for循環所用的數據，不要在v-for循環中去讀取數組、對象類型的數據。在上述template模板中濫用this的例子中可以這樣優化。
假設list、arr、obj皆是服務端返回來的數據，且arr和obj沒有用到任何模塊渲染中，可以這樣優化。
優化前：
|
1
2
3
4
5
6
7
8
|
<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> |
優化后：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template> <div class="wrap"> <div v-for=item in listData> <div{{item.name}} </div> <div>{{item.age}}</div> </div> </div></template><script>const arr = [];const obj = {}export default { data() { return { list: [], } }, computed: { listData: function ({list}) { list.forEach(item => { item.name = arr[item.index].name; item.age = obj[item.id].age; }) return list; } },}</script> |
以上就是Vue中避免濫用this去讀取data中數據的詳細內容，更多關于Vue中避免濫用this的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6934911314871451685
