Computed 一樣可以繼續使用 Computed

Computed 是 Vue 很偉大的發明,它簡單地實現了 Reactive Programming,當 computed 所相依的 datacomputed 改變時,computed 也會自動改變。

Version


Vue 2.5.17
Vue CLI 3.2.1

Before Refactoring


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>
<div>{{ title }}</div>
<div>{{ prof }}</div>
</div>
</template>

<script>
const title = function() {
return `Mr. ${this.firstName} ${this.lastName}`;
};

const prof = function() {
return `Prof. ${this.firstName} ${this.lastName}`;
};

export default {
name: 'HelloWorld',
data: () => ({
firstName: 'Sam',
lastName: 'Xiao',
}),
computed: {
title,
prof,
},
};
</script>

titleprof 兩個 computed,各自相依 firstNamelastName 兩個 data

我們發現這兩個 computed,其 ${this.firstName} ${this.lastName} 是重複的,我們可以將這段程式碼 extract 出來。

After Refactoring


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
29
30
31
32
33
<template>
<div>
<div>{{ title }}</div>
<div>{{ prof }}</div>
</div>
</template>

<script>
const fullName = function() {
return `${this.firstName} ${this.lastName}`;
};

const title = function() {
return `Mr. ${this.fullName}`;
};

const prof = function() {
return `Prof. ${this.fullName}`;
};

export default {
name: 'HelloWorld',
data: () => ({
firstName: 'Sam',
lastName: 'Xiao',
}),
computed: {
fullName,
title,
prof,
},
};
</script>

27 行

1
2
3
4
5
computed: {
fullName,
title,
prof,
},

新抽出 fullName,也是 computed

第 9 行

1
2
3
const fullName = function() {
return `${this.firstName} ${this.lastName}`;
};

將重複的地方抽成 fullName(),別忘了它是 computed

13 行

1
2
3
4
5
6
7
const title = function() {
return `Mr. ${this.fullName}`;
};

const prof = function() {
return `Prof. ${this.fullName}`;
};

titleprof 兩個 computed 可以重複使用 fullName computed

Conclusion


  • 一般人在使用 computed 時,都著重於對 data,但別忘了 computed 也可使用 computed,藉由這個特性,可將 computed 重複的部分再 extract 成 computed,依然保有原來的特性,也可以解決程式碼重複的問題

Sample Code


完整的範例可以在我的 GitHub 上找到

2018-12-29