computed：相当于method一样，可以当做方法执行，返回function内return的值赋值在DOM上。但是多个{{}}(模板语法)使用了computed，computed内的function也只执行一次。仅当function内涉及到Vue实例绑定的data的值的改变，function才会从新执行，并修改DOM上的内容。

computed与method方法的不同点在于：

计算属性(computed)的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

任何复杂的运算都应该放在computed里进行 ，这是vue官方给的解释。

当你需要比如改变字符串的顺序（反转），或者执行一段计算等等，任何的一种运算，或者最终返回值的这种，你都应该放在computed里进行.

computed会保存当前状态，一直到数据再次发生改变，

这样就不用每次都执行运算，每次都返回值，或许值并未改变。

<span @click="packup">{{putContText}}</span>

 packup函数会动态绑定bol的值，bol值发生改变的时候，就会触发页面内容的改变，当页面内容改变就会就会触发putConText函数。

data:function(){
    return {
      bol:true,
    }
},
methods:{
    packup(){
      this.bol=!this.bol;
    }
},
computed:{
    putContText(){
      if(this.bol===true){
        return "收起";
      }else if(this.bol===false){
        return "展开";
      }
    }
}

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

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

this.reversedMessage的值始终取决于this.message的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道this.reversedMessage依赖于this.message，

因此当this.message 发生改变时，所有依赖this.reversedMessage的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解