Vue.js是一款開源的JavaScript框架，它採用MVVM（Model-View-ViewModel）模式，旨在提供簡單、靈活的方式來建立使用者介面。其中，響應式框架是Vue.js最重要的特性之一，它允許開發者對資料進行雙向的綁定和響應式更新。在Vue.js中，computed就是其中一個重要的概念。本文將介紹computed的基礎用法和範例。
一. 什麼是computed？
computed是Vue.js中的一個屬性，它可以實現動態計算屬性的功能。也就是說，computed可以根據所依賴的資料動態計算出一個新值，而該計算屬性在所依賴的資料發生變化時會自動更新。與methods不同，computed是一個計算屬性而非方法。
二. computed的基礎使用
computed屬性可以使用以下方式進行定義：
new Vue({
// ...
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})在上述程式碼中，我們定義了一個reversedMessage的計算屬性，它是基於message屬性的計算結果。
接下來，我們將在HTML模板中使用computed屬性。為了取得計算屬性的值，我們不再直接綁定message，而是使用computed屬性，如下所示：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>在模板中，我們可以使用差值表達式{{ }}來顯示計算屬性的值。由於我們已經將reversedMessage作為計算屬性進行了定義，因此Vue.js會自動進行計算並更新視圖。
三. computed的快取機制
在計算屬性所依賴的資料變更時，computed會自動重新計算並更新視圖。但是，當計算屬性所依賴的資料沒有改變時，computed會記住上一次計算的結果，並直接傳回上一次的值。這種快取機制可以提高應用的效能和效率。
舉個例子，如下程式碼中，我們定義了一個computed屬性fullName：
new Vue({
// ...
data: {
firstName: 'Peter',
lastName: 'Parker'
},
computed: {
fullName: function () {
console.log('computed')
return this.firstName + ' ' + this.lastName
}
}
})當我們第一次造訪fullName時，控制台會輸出一條「computed」的訊息。但是，當我們修改firstName或lastName屬性的值時，computed不會每次都重新計算，而是直接傳回上一次計算的結果。
四. computed與methods的差異
computed和methods都可以用來實現動態計算屬性的功能，它們的主要差異在於計算屬性的快取機制。
在範例中，我們定義了一個計算屬性fullName和一個方法getFullName：
new Vue({
// ...
data: {
firstName: 'Peter',
lastName: 'Parker'
},
computed: {
fullName: function () {
console.log('computed')
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName: function () {
console.log('method')
return this.firstName + ' ' + this.lastName
}
}
})在範本中，我們可以透過以下方式來呼叫fullName和getFullName：
<div id="example">
<p>Computed fullName: "{{ fullName }}"</p>
<p>Method fullName: "{{ getFullName() }}"</p>
</div>我們發現，在呼叫getFullName方法時，每次都會重新計算，而不會使用快取結果。因此，如果我們需要頻繁地呼叫某個方法，那麼使用computed屬性可以提高應用程式的效能和效率。
五. computed的範例
以下是一個計算購物車總價的範例，我們假設購物車的資料結構如下：
new Vue({
// ...
data: {
items: [
{ name: 'iPhone', price: 6999, count: 1 },
{ name: 'iPad', price: 3888, count: 2 },
{ name: 'MacBook', price: 9888, count: 1 }
]
},
computed: {
totalPrice: function () {
var result = 0
for (var i = 0; i < this.items.length; i++) {
result += this.items[i].price * this.items[i].count
}
return result
}
}
})在範本中，我們可以使用computed屬性來顯示購物車的總價：
<div id="example">
<table>
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
<td>{{ item.price * item.count }}</td>
</tr>
<tr>
<td colspan="3">总价：</td>
<td>{{ totalPrice }}</td>
</tr>
</tbody>
</table>
</div>在上述範例中，我們定義了一個計算屬性totalPrice，該屬性依賴items數組中所有商品的價格和數量。每當陣列中任一商品的價格或數量改變時，Vue.js會重新計算總價，並自動更新視圖。
六. 總結
在Vue.js中，computed是一個非常強大且重要的特性，它是實現動態計算屬性的關鍵。計算屬性的快取機制可以提高應用的效能和效率。與methods不同，computed是一個計算屬性而非方法。透過學習和使用computed，我們可以更方便和有效率地建立優秀的Vue.js應用程式。
以上是VUE3基礎教學：使用Vue.js響應式框架之computed的詳細內容。更多資訊請關注PHP中文網其他相關文章！
