前言

计算属性概念

顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。
从这种角度考虑，其实它和 ES5 中的 getter 有着“血亲关系”，事实上，vue 中的很多实现也是依赖于 getter 和 setter 的。

var vm = new Vue({
    el: '#example',
    data: {
        firstName: 'Dale',
        lastName: 'He'
    },
    computed: {
       fullName: function () {
           return this.firstName + ' ' + this.lastName; 
       }
    }
});

这里就是最典型的计算属性，当需要读取 fullName “属性”的时候，我们去读取了实例对象上的 firstName 和 lastName 属性，然后进行了字符串的拼接操作，经历了以上一系列的计算，将最终得到的结果作为 fullName “属性”的值，也即是 "Dale He"。

计算属性（代理模式）

虽然这里可能不完全符合设计模式中的代理模式，但从它在读取属性之时，先进行了一定量计算，再返回需要的结果，这个计算的过程，实际上我们就可以认为是在为这个属性添加了一个代理。每次读写一个属性的时候，都先经历代理中的计算操作。vue 默认添加了 getter，也即是“读”的代理，通过如下代码，也可以添加“写代理”。

var vm = new Vue({
    el: '#example',
    data: {
        firstName: 'Dale',
        lastName: 'He'
    },
    computed: {
        fullName: {
            get: function () {
                return this.firstName + ' ' + this.lastName;
            },
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
});

读的时候，和前面一样，直接返回字符串拼接结果；写的时候，直接更新读的时候它的源数据 firstName 和 lastName，这样三个属性就都会自动更新过来。

观察者（观察者模式）

这个就比较明确了，从它的名字就可以知道。vue 框架本身作为调度中心，使得开发者只需要关注两个核心主体——被观察者以及被观察者变化之后所需要采取的操作。

var vm = new Vue({
    el: '#example',
    data: {
        firstName: 'Dale',
        lastName: 'He'
    },
    watch: {
        firstName: function () {
            console.log('firstName changed!');
        },
        lastName: function () {
            console.log('lastName changed!');
        }
    }
});

这里，将 firstName 和 lastName 作为被观察者，watch 方法中为二者定义了当它们发生变动时所需要添加的操作，这里只进行了 console.log 打印，开发者可以根据自身需要完成更为复杂的功能。

计算属性 VS 观察者(watcher)

vue.js 官网上面，就计算属性和观察者两个之间的关系和取舍说了很多东西，但是感觉具体其实还是没有说明白。因为两个虽然某些场合下可以实现相同的功能，但如前面所述，二者所代表的核心思想确实截然不同。
计算属性是在读写一个属性的时候，添加了一层拦截，使得我们能够在让这个属性变得可以“计算”，虽然一方面它可以像一个普通属性直接取值，但是另一方面，它更像一个函数，可以包含大量计算操作。
观察者则是为一个属性添加了一个监听，当这个属性发生变化的时候，开发者可以得到得知并采取一定的措施。

结语

虽然计算属性和观察者实现思路上有所不同，但是有的情况下，他们可以实现类似的功能，连带的通过 methods 也一样。官网上也给出了对照。例如实现通过 firstName 和 lastName 得到 fullName 这个最简单的例子：

• 计算属性，便捷，可缓存，性能较好；
• 观察者，需要添加多个监听，较为麻烦；
• methods，不能缓存，每次都会计算，性能较差

但是这里也并不是说，我们非得使用计算属性而弃用观察者和 methods，观察者和 methods 都有各自的特性。没有最好的，只有最合适的~