Vue学习笔记：计算属性

var vm = new Vue({
          el: '#example',
          data: {
            goods: {id:1, name:"红烧牛肉面", price:5, amount:2}
          },
          methods:{
            total:function(){
              return this.goods.price*this.goods.amount;
            }
          },
          computed: {
            // 计算属性的 getter
            total: function () {
              // `this` 指向 vm 实例
              return this.goods.price*this.goods.amount;
            }
          }
        })

  <div id="example">
            <p>您购买了{{ goods.amount }}份{{ goods.name }}---共计{{ total }}元。</p>
            <p>总共花费了{{ total() }}元。</p>
        </div>

1.　Vue知道vm.total中的数据依赖于vm.goods,因此当vm.goods改变时，所有依赖于该计算属性的绑定也会更新。
2.    使用Vue中的数据，计算后返回所需要的值，使视图层代码更精简，易于维护。
3.    提供的函数作为vm.total属性的getter函数。
4.    computed VS methods
       可以将同一个函数定义为方法，这样产生的效果与计算属性是相同的。
       但是，计算属性是基于他们的依赖进行缓存的，计算属性只有在相关依赖发生改变时才重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。