Vue 當中的計算屬性computed
阿新 • • 發佈：2020-12-22
技術標籤：前端VueVue computedVue 計算屬性
目錄
計算屬性關鍵詞: computed
計算屬性在處理一些複雜邏輯時是很有用的。
1.普通寫法舉例
可以看下以下反轉字串的例子：
<div id="app">
<h2>{{ name.split('').reverse().join('') }}</h2>
</div><div id="app"> <!-- 一般的寫法 --> <h3>歌手：{{firstName + lastName + "雙截棍" + "!"}}</h3> </div>
2.計算屬性寫法舉例
計算屬性的例子：
<body> <div id="app"> <h2>{{ name.split('').reverse().join('') }}</h2> <!-- 一般的寫法 --> <h3>歌手：{{firstName + lastName + "雙截棍" + "!"}}</h3> <!-- 計算屬性的寫法 --> <h3>{{fullName}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ firstName:"周", lastName:"杰倫", name:"周杰倫" }, computed: { fullName() { // 會將計算的結果進行快取，只要this.firstName 和 this.lastName的內容不改變， //不會反覆的進行計算，效能消耗低 return this.firstName + this.lastName } } }) </script> </body>
上面的例子聲明瞭一個計算屬性 fullName，提供的函式將用作屬性app.fullName 的 getter 。
app.fullName 依賴於 app.firstName和app.lastName，在 app.firstName和app.lastName 發生改變時，app.fullName 也會更新。
3. computed vs methods
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。
使用 computed 效能會更好，但是如果你不希望快取，你也可以使用 methods 屬性。
4. computed setter 和getter
computed 屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ，學過OC的都應該對setter 和getter比較熟悉。
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "周",
lastName: "杰倫",
name: "周杰倫"
},
computed: {
fullName: {
// 會將計算的結果進行快取，只要this.firstName 和 this.lastName的內容不改變，
//不會反覆的進行計算，效能消耗低
// getter
get() {
return this.firstName + this.lastName
},
// setter
set(newValue) {
var names = newValue.split('.')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
})
app.fullName = '周.杰倫' //賦值就是呼叫setter方法
document.write('firstName: ' + app.firstName);
document.write('<br>');
document.write('lastName: ' + app.lastName);
</script>
從上圖的執行結果可以看出，執行 app.fullName = '周.杰倫' 時，setter 會被呼叫， app.firstName 和 app.lastName的值也是會對應更新的。
5.總結
- 計算屬性的關鍵字是computed
- 計算屬性的取值會呼叫getter
- 計算屬性的賦值會呼叫setter
- 計算屬性會對所計算的值進行快取
- 如果需要進行反覆的計算，建議使用計算屬性，這樣可以減少效能消耗