Vue学习笔记：计算属性

 1 var vm = new Vue({
 2           el: '#example',
 3           data: {
 4             goods: {id:1, name:"红烧牛肉面", price:5, amount:2}
 5           },
 6           methods:{
 7             total:function(){
 8               return this.goods.price*this.goods.amount;
 9             }
10           },
11           computed: {
12             // 计算属性的 getter
13             total: function () {
14               // `this` 指向 vm 实例
15               return this.goods.price*this.goods.amount;
16             }
17           }
18         })

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

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