计算属性

模板表达式是非常的便利，也可以进行简单的运算，但是面对较为复杂的运算，就会让模板变得那已维护。面对相对复杂的运算应该选用计算属性来处理

简单的例子

    
{{msg}}
    
computed:{{reverseMsg}}

结果是：

结果

我们先声明一个计算属性 reverseMsg。我们提供的函数将作为 vm.reverseMsg的 getter；
vm.reverseMsg的值是取决于 vm.message的值。
Vue知道 vm.reverseMsg的值是依赖于 vm.msg，因此当 vm.msg发生改变时，所有依赖于 vm.reverseMsg的绑定也会更新。

计算缓存 VS Methods

我们也可以通过利用Methods来达到同样的效果

methods:{{reverseMsgfn()}}

... //其他的代码省略
methods: {
           reverseMsgfn: function(){
               return this.msg.split(' ').reverse().join(' ');
           }
       }

结果：

Methods的结果

最终的结果都是一样的，不同的是 计算属性是基于他们的依赖进行缓存的; 计算属性只有在他的相关依赖发生改变时才会重新求值；这就意味着，在 msg值没有发生改变， reverseMsg的值就不会发生改变，这期间多次访问 reverseMsg属性都是之前的的计算结果，而是不值再次进行执行函数;如果我们不需要缓存的话，我们就可以用 method代替。

计算属性 VS Watch属性

Vue提供了一种方式来观察和响应Vue实例上的数据变动：watch属性

     firstName:
     lastName:
     
fullName:{{fullName}}


...//其他代码省略
watch: {
       firstName: function(val){
             this.fullName = val + ' ' + this.lastName;
       },
       lastName: function(val){
             this.fullName = this.firstName + ' ' + val;
       }
 }

下面使用computed实现的

     firstName:
     lastName:
     
fullName:{{fullName}}


...//其他代码省略
computed: {
        fullName : {
                get: function(){
                    return this.firstName +' '+ this.lastName;
                 },
               set: function(newVal){
                    var names = newVal.split(' ');
                    this.firstName =  names[0];
                    this.lastName = names[names.length - 1];
                } 
        }

watch和computed结果

computed也可以实现相同的效果，而且代码更加简洁易懂
计算属性，一般默认只有getter，不过我们也可以提供一个setter,我们就可以通改变 fullName值，也可以动态改变 firstName和 lastName。

观察者 Watchers

虽然计算属性在大多数情况下是可以替代watch的，但是在执行异步操作或者更大开销操作的时候watch更适合;

watch选项允许我们执行异步操作，限制我们操作的频率并在得到结果前设置中间状态，这是计算属性无法做到的。

    你的问题是：
    答案是：

实例结果

官方API

Vue