vue计算属性

207 阅读2分钟
  1. 什么是:自己不保存属性值,需要根据其他属性值经过复杂的计算得到自己的属性值
  2. 为什么:因为通常需要结果复杂计算得出的结果,都不会保存在数据库中,自然后端也不会给我们提供现成的值直接使用,只能靠我们在前端,利用其它属性的值计算获得比如:购物车的总价:计算过程复杂,又频繁发生变化的值,通常数据库里都不存,而是完全靠客服端动态计算获得!
  3. 何时:只要界面上想要的值,后端没有直接提供,但是可以根据其他值计算获得,就用计算属性
  4. 如何:2步
  (1).定义一个计算属性:
   new Vue({
      el:"#app",
      data:{
         可直接使用的属性
      },
      methods:{
         事件处理函数
      },
      computed:{
         计算属性名(){
         //计算属性虽然用法和属性一样,但是本质却是一个函数
         //根据data转给你其他属性值,经过复杂的计算获得一个最终的属性值
               return  计算结果
         }
      }
   })
   (2).在HTML中使用计算属性:
      比如:<元素>{{计算属性名}}</元素>
      强调:计算属性虽然本质是函数,但是使用时不要加(),和data中的普通属性完全一样

5.结果:运行时new Vue()会自动计算计算属性的结果,代替{{计算属性名}}的位置 6.computed vs methods:

(1).用法:
      a.methods中的函数在HTML中使用时必须加()调用
      b. computed中的计算属性在HTML中使用时不用加()
(2).效率:当反复使用这个函数或计算属性时
      a.methods中的函数,每加一次(),就重复执行一次!--没必要
      b.computed中的计算属性结果,只在首次使用时计算一次,然后就被vue缓存起来
      从第二次使用开始无需重复计算,就可直接使用缓存中的值--效率更高!

7.总结:何时使用函数?何时使用计算属性?

(1).如果更侧重于使用函数的执行结果数值时,首选计算属性
(2).如果不关心执行结果,反而更侧重于执行一项操作(比如:发送ajax请求),首选mehods中的函数

8.示例:计算购物车总价:

<body>
   <!--计算购物车总价-->
   <div id="app">
      <h3>总价:¥{{total.toFixed(2)}}</h3>
      <ul>
       <!--小计-->
       <li v-for="(p,i) of cart" :key="i">{{i+1}} | {{p.pname}} | {{p.price}} | {{p.count}} | 小计:¥{{(p.price*p.count).toFixed(2)}}</li>
      </ul>
   </div>
   <script>
        var vm=new Vue({
           el:"#app",
           data:{
              cart:[
                 {pname:"华为",price:5588,count:2},
                 {pname:"苹果",price:8888,count:1},
                 {pname:"小米",price:3288,count:3}
              ]
           },
           methods:{
           },
           computed:{
              //定义计算属性total,根据data总cart数组中的内容,计算出总价
                  total(){
                  console.log(`计算了一次总价`);
                  var result=0;
                  for(var p of this.cart){
                       result+=p.price*p.count;
                  }
                  return result;
                  }
           }
        })
   </script>
</body>