vue计算属性的使用(computed)

vue计算属性的使用(computed)

我们在一些数据需要实时响应,经常更新的地方使用计算属性,虽然说定义一个方法也可以,直接在{{}}中写入逻辑代码也行,但是难免看起来会有一点麻烦,并且后期也不易维护.

比如使用vue进行2个文本框中的数值求和,你可以直接在{{}}中进行运算

<body>
 <div id="box">
   <input type="text" v-model="num1">
   <input type="text" v-model="num2">
    {{(num1-0)+(num2-0)}}   //会直接输出总和
 </div>
 <script>`在这里插入代码片`
   new Vue({
     el:'#box',
     data:{
       num1:null,
       num2:null
    }
  })
 </script>
</body>

也可以使用方法进行计算

<body>
 <div id="box">
   <input type="text" v-model="num1">
   <input type="text" v-model="num2">
    {{sum()}}  
 </div>
 <script>
   new Vue({
     el:'#box',
     data:{
       num1:null,
       num2:null,
    },
     methods: {
       sum(){
          return (this.num1-0)+(this.num2-0)
      }
    },
  })
 </script>
</body>

使用计算属性来写

<body>
 <div id="box">
   <input type="text" v-model="num1">
   <input type="text" v-model="num2">
    {{mycomputed}}
 </div>
 <script>
   new Vue({
     el:'#box',
     data:{
       num1:null,
       num2:null,
    },
     computed: {
         // 计算属性可以当做属性来调用
       mycomputed(){
          return (this.num1-0)+(this.num2-0)
      }
    },
  })
 </script>
</body>
  • 第一种方法直接在页面中 {{ }}写逻辑代码,虽然可以很顺利的得出结果,但是当代码逻辑稍微复杂的时候,整个代码就会看起来很乱,后面维护起来就会很麻烦
  • 第二种与第三种,虽然都是将逻辑代码写在methods,computed的方法中,表面上看起来调用是只是加不加’( )’ 小括号的区别,但是它们2个还是有区别的
<body>
 <div id="box">
   <p>在methods定义的方法</p> 
   
  {{mymethods()}}
  {{mymethods()}}

   <br>

   <p>使用computed计算属性</p>

  {{mycomputed}}
  {{mycomputed}}

 </div>
 <script>
   new Vue({
     el:'#box',
     data:{
       mytext:"abcdef"
    },
     methods:{
       mymethods() {
         console.log("mymethods")
         return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
      }

    },
     computed:{
       mycomputed(){
         console.log("computed")
         return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
      }
    }
  })
 </script>
</body>

运行上面的代码会显示这样的结果
在这里插入图片描述

  • 结果看起来都是对的,都是首字母大写,并且都被调用了两次,但是当我们打开控制台,看打印次数时,会发现

在这里插入图片描述

  • Methods的方法被调用了两次,而computed中的方法,确只被调用了一次,这是因为第二次是直接在缓存中取得的结果值.

    如果我将初始值改变

在这里插入图片描述
在这里插入图片描述

发现页面数据也会跟着改变,这是因为计算属性是依赖性缓存,当依赖的值发生改变,那么计算属性就会跟着改变,当然缓存中的数据也会被替换,所以后面再次调用时,还是会直接从缓存中拿取结果.所以计算属性中的方法,只会被调用一次.既然有缓存的话,那么我们在一些数据结果,需要被多次调用的地方,使用计算属性,就可以大大提高数据的计算效率.

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值