Vue中的computed和watcher是兩個非常常用的屬性。在實際開發中，computed和watcher可以很好地幫助我們監聽數據的變化，從而實現頁面的自動更新。在Vue中，computed和watcher還有一些互相關聯的特性，比如computed屬性可以被watcher監聽到，watcher屬性也可以監聽到computed屬性的變化。

首先，讓我們來看看computed屬性。computed屬性是一種依賴于數據的計算屬性，并且具有緩存機制。當computed屬性依賴的數據發生變化時，computed屬性才會重新計算，如果computed屬性依賴的數據沒有發生變化，則從緩存中取出計算結果。這個特性可以讓我們避免重復計算，提高渲染效率。

computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}

上面的代碼演示了一個簡單的computed屬性fullName的計算方法，它依賴于firstName和lastName。當firstName和lastName有變化時，computed屬性fullName才會重新計算，否則直接從緩存中取出結果。

除了computed屬性，Vue中還有另一個非常重要的屬性watcher。watcher屬性是用來監聽數據變化的。當我們需要在數據發生變化后執行一些邏輯操作時，就可以使用watcher屬性。

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

上面的代碼演示了如何使用watcher屬性監聽firstName和lastName的變化。當firstName和lastName有變化時，分別執行相應的回調函數，更新數據。

最后，需要注意的是，computed屬性可以被watcher監聽到，watcher屬性也可以監聽到computed屬性的變化。這意味著我們可以通過computed屬性來簡化代碼和提高效率。

computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName: function (val) {
console.log('fullName changed to', val)
}
}

上面的代碼演示了如何同時使用computed和watcher來監聽fullName的變化。當firstName或lastName有變化時，computed屬性fullName會重新計算，并且觸發watcher屬性的回調函數，打印出fullName的變化。