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
可以将同一个函数定义为方法，这样产生的效果与计算属性是相同的。
但是，计算属性是基于他们的依赖进行缓存的，计算属性只有在相关依赖发生改变时才重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。