首先這里進(jìn)行聲明，這個講的是vue2的內(nèi)容，在vue3發(fā)生了什么變動與此無關(guān)

這里是官網(wǎng)：
https://v2.cn.vuejs.org/v2/guide/installation.html

computed => 計(jì)算屬性

watch => 偵聽器（也叫監(jiān)視器）

其區(qū)別如下：

1.computed能完成的功能，watch都能完成
2.watch能完成的功能，computed不一定能完成，例如：watch可以進(jìn)行異步操作

兩個重要的小原則：
1.所被Vue管理的函數(shù)，最好攜程普通函數(shù)，這樣this的指向才是vm或組件實(shí)例對象
2.所有不被Vue所管理的函數(shù)（定時器的回調(diào)函數(shù)，ajax的回調(diào)函數(shù)等，promise的回調(diào)函數(shù)），最好寫成箭頭函數(shù)，這樣this的指向才是vm或組件實(shí)例對象

官網(wǎng)是這么寫的：

Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動：偵聽屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}
})

上面代碼是命令式且重復(fù)的。將它與計(jì)算屬性的版本進(jìn)行比較：

var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}
})

很明顯可以看出，官網(wǎng)更加推薦計(jì)算屬性的使用