Vue----计算属性

计算属性：
1. 什么是: 自己不实际保存属性值，每次使用属性时，都临时根据所依赖的变量动态计算出结果应用到页面上。
2. 何时: 如果一个属性值不是现成的，需要经过复杂的计算过程才能获得，都要用计算属性
3. 如何:
(1). 在new Vue()中添加新成员:
new Vue({
el:"#app",
data:{ … },
methods:{ 事件处理函数 },
computed:{ 专门保存计算属性
属性名(){
return 根据其他变量动态计算出新属性值
}
}
})
(2). 使用计算属性:
<元素>{{ 属性名 }}</元素> //计算属性使用时一定不要加()！
4. 问题: 既然是一个函数，为什么不放在methods中？
答: 因为放在methods中的普通函数，每调用一次，都会重新执行一次复杂计算，计算结果不会被vue缓存并反复使用。
5. 计算属性的优点: 计算属性首次计算的结果会被vue缓存起来，即使反复使用计算属性也不会重复计算。除非依赖的变量发生了变化，才被迫重新计算。但是新值依然会被缓存，并重复使用！
6. 总结:
a. 今后如果侧重于做一件事儿，而不太关心返回值，就用methods中的普通函数！
b. 今后如果更侧重于使用函数返回的结果值，就用computed计算属性
7. 示例: 使用计算属性实现购物车总价:

	<div id="app">
    <!--希望显示购物车商品列表和购物车总价-->
    <h3>总价: ¥{{total.toFixed(2)}}</h3>
    <ul>
      <li v-for="(p,i) of cart" :key="i">
        {{p.pname}} | ¥{{p.price.toFixed(2)}} | {{p.count}} | ¥{{(p.price*p.count).toFixed(2)}}
      </li>
    </ul>
    <h3>总价: ¥{{total.toFixed(2)}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        cart:[
          {pname:"华为", price:5588, count:2},
          {pname:"小米", price:3588, count:3},
          {pname:"苹果", price:8588, count:1},
        ]
      },
      methods:{
        
      },
      computed:{
        //因为购物车总价不是现成的，需要经过复杂的遍历过程才能求出
        //所以，用计算属性。
        total(){
          console.log(`调用了一次total()`)
          var result=0;
          for(var p of this.cart){
            result+=p.price*p.count;
          }
          return result;
        }
      }
    })
  </script>