1. 前言

• 在本人看来,Vue.js的计算属性是我目前见过最棒的东西，该属性很好的让我们不再关注视图层，只关注代码的逻辑即可，至于数据如何展现则只需由Vue负责，不需要我们的参与。除此之外，v-model以及自定义组件(单文件组件)也很好的体现这一个性能
• 所以如果在面临选择是使用计算属性还是监视属性的情况下，优先选择计算属性

2.计算属性(computed)

废话少说,先上代码

<div>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
        data(){
            return { 
                message: 'Hello',
            }
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('');
            }
        }

可以看到我们使用的计算属性替代了模板内表达式的功能。所以，对于任何复杂逻辑，你都应当使用计算属性。而且计算属性让我们只关注于逻辑实现，至于后期的数据在界面上的表示形式则直接由Vue.js负责，读者可以看到我们并没有直接参与页面展示上面来
此外，传统的直接通过表达式求值的方式需要我们自行取值，而计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。也就是说，计算属性会直接从缓存拿值，并伴随着值的改变而改变。而传统的直接通过表达式求值的方式需要我们在拿值之前需要执行一次getter()函数

3. 监听属性

监听属性其实质是一次异步回调，希望读者在想到使用监听属性之前多考虑能否采用计算属性来取代监听属性
对比同一个功能实现

//计算属性
computed: {
        fullName2: function () {
              return this.firstName + ' ' + this.lastName
        }
}
//监听属性
watch: {
         firstName: function (val) {
               this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
               this.fullName = this.firstName + ' ' + val
       }
} 

可以看到计算属性的代码更加简洁也更加高效，而且就实现效果而言，明显计算属性会更好一点
读者可以自行实现这同一种功能的两种实现方式，就可以比较出来为什么说计算属性优于监听属性了