Vue.js是一個流行的前端框架，具有易于使用、高效、靈活等優點。Vue中計算屬性（computed）和監聽器（watcher）是兩種非常有用的屬性。在這篇文章中，我們將會深入了解Vue中的computed和watch，它們的作用、區別和使用方法。

computed是一個能夠對Vue實例進行計算的屬性。通過computed使得我們能夠在模板中直接使用計算后的屬性，而不需要在Vue實例data中定義新的屬性。computed是一個可以進行緩存的屬性，只有當它依賴的數據發生變化時才會重新計算。

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

上述代碼中，我們定義了一個computed屬性fullName，它返回實例中的firstName和lastName兩個屬性相加后的結果。注意到我們并沒有在Vue實例的data中定義fullName這個屬性，而是在computed中定義了fullName。當firstName或lastName發生變化時，會重新計算fullName的值。computed使得我們的代碼更加簡潔優美，而且提高了代碼的可重用性。

watch是一個觀察者，用于觀察Vue實例中數據的變化。當數據發生變化時，watch會執行一個回調函數。watch相對于computed來說更加靈活，可以處理更加復雜的場景。例如，當一個表單中的數據發生變化時，我們可以使用watch來處理表單的驗證、提交等事件。

watch: {
firstName: function (val) {
console.log('firstName=' + val)
},
lastName: function (val) {
console.log('lastName=' + val)
}
}

上述代碼中，我們定義了兩個watch，它們分別觀察Vue實例中firstName和lastName這兩個屬性的變化。當firstName或lastName發生變化時，watch會執行相應的回調函數。watch是一個低級別的屬性，需要手動進行銷毀和創建，因此需要更加謹慎地使用。

綜上所述，computed和watch是Vue中兩個非常重要的屬性。它們分別用于計算屬性和觀察數據變化。computed具有緩存機制，提高了代碼效率和可重用性；watch相對更加靈活，可以處理更加復雜的場景。在實際開發中，我們可以根據需要合理地使用computed和watch，以達到更好的效果。