computed是Vue實例中一個非常有用的屬性。它的主要作用是對需要重復計算的變量進行緩存，減少重復計算的時間和資源浪費。這樣可以提高應用程序的效率和性能。computed屬性可以接受一個函數作為其值，并且這個函數可以根據data屬性中的數據進行計算。

computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}

當我們計算屬性的返回值發生變化時，Vue會自動觸發重新計算，從而更新視圖。這里需要注意的是，計算屬性不會改變源數據，而是根據源數據計算新的值。

computed屬性除了默認的get函數，還可以通過設置set函數來實現數據雙向綁定。這意味著我們不僅可以從源數據更新計算屬性，而且也可以通過計算屬性更新源數據。

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

當我們修改計算屬性fullName時，set函數會自動觸發，從而更新源數據firstName和lastName。這個過程是在Vue的響應式系統中完成的，所以我們不需要手動去維護數據的更新。

在實際應用中，我們經常需要使用多個計算屬性來完成復雜的數據計算。這種情況下，如果每一個計算屬性都重新計算一遍，那么系統的效率會非常低。為了解決這個問題，Vue提供了watch屬性。

watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}

這里我們可以定義一個watch對象，監視firstName和lastName屬性的變化。當這兩個屬性變化時，對應的watch函數會自動觸發，從而更新fullName計算屬性的值。這個過程是非常靈活和強大的，可以自由組合和嵌套，以滿足各種復雜的數據計算需求。

在使用computed屬性時需要注意一些細節問題。首先，計算屬性是惰性計算的，也就是說，只有當我們訪問計算屬性時，才會觸發計算。這個特性可以減少不必要的計算，提高應用程序的效率和性能。其次，computed屬性是基于其依賴項的，也就是說，當依賴項沒有發生變化時，計算屬性不會重新計算。這個特性可以避免無意義的計算和更新，優化系統的性能。

在實際開發中，我們經常需要使用computed屬性來進行數據的計算和轉換。computed屬性是Vue響應式系統的核心屬性之一，也是優化應用程序性能的重要手段。在使用computed屬性時，我們需要注意其緩存機制和依賴項處理，以及如何與watch屬性協同工作實現復雜數據計算。