一、计算属性与方法
首先两者返回的结果一样，但是
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）