vue计算属性的使用（computed）

当需要使用多个变量的计算结果时，可以利用vue的计算属性，将计算结果返回给一个计算属性，后面直接调用该属性，利用计算属性结合v-module可以实现简单的计算器功能
1.定义和调用
计算属性定义在computed中，调用时使用mustache语法调用且后面不跟()
用计算属性得到总价格

<div id="app">
    <ul>
      <li v-for='price in books'>{{price}}</li>
    </ul>
    <h2>总价：<span>{{totalprice}}</span></h2>
    <!-- 虽然computed中的totalprice是以函数定义，但是使用时不要在后面加(),
      这里它是一个计算属性，本质是一个属性 -->
  </div>
  <script>
    const app=new Vue({
      el:'#app',
      data:{
        books:[{id:'o1',name:'aaa',price:98},{id:'o2',name:'bbb',price:108},
          {id:'o3',name:'ccc',price:78},{id:'o4',name:'ddd',price:79}
        ]
      },
      computed:{ // 计算属性定义在computed中，以函数的形式定义并返回一个结果
        totalprice:function(){
          let result=0
          for(let item of this.books){
            result+=item.price
          }
          return result
        }
      },
      methods:{
      }
    })
  </script>

执行结果：

注意：计算属性是一个属性，它实际拥有get 和set 方法，但由于一般都不使用set方法，只使用get方法，所以为了简便，我们看到的计算属性就以函数形式定义，所以使用时后面不能加()。
2.计算属性和methods的区别：计算属性具有缓存机制。
methods中的方法每使用一次方法就会被调用一次，不管里面的数据是否发生变化。而使用计算属性时，只要里面影响结果的变量没有发生变化，无论计算属性被使用多少次，函数都只会被调用一次。