一、計算屬性與方法
首先兩者返回的結果一樣，但是
1、計算屬性他是依賴於響應式緩存的，也就是說當響應式信息沒有改變時，它會利用原先的緩存進行顯示，而不用不停的去調用方法
例如：有一個計算屬性A,需要大量的計算才可以得到A,同時有一個依賴於A的計算屬性B，那么如果沒有緩存的話，為了得到B就需要多次執行A,想想是不是有時候沒有必要呢
所以他們的區別就在於你在實際的開發中，是否需要緩存，需要的話就用計算屬性，不需要就用方法
實例：
計算屬性
computed: {
// 計算屬性的getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
方法：
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
二、計算屬性與偵聽屬性
偵聽屬性：是vue提供的一種可以觀察和響應vue數據變化的一個方法。
但是如果你要觀察數據變化還是用計算屬性比較好，因為偵聽屬性寫起來相對來說沒有計算屬性結構那個直觀，而且有些繁瑣
官網實例如下：
<div id="demo">{{ fullName }}</div>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 } } })上面代碼是命令式且重復的。將它與計算屬性的版本進行比較：
var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' },
//計算屬性 computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })那個更好？一目了然
那偵聽屬性沒有用嗎？怎么可能，官網寫了它當然有用。
當需要在數據變化時執行異步或開銷較大的操作時
比如在得到結果前設置一個中間狀態、操作異步等這些計算屬性是做不到的（可以去參考官網哦，哪里有實例講的很清楚的https://doc.vue-js.com/v2/guide/computed.html）