vue计算属性的使用(computed)

最新推荐文章于 2024-06-05 10:59:26 发布

weixin_43899442

最新推荐文章于 2024-06-05 10:59:26 发布

阅读量603

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43899442/article/details/104634341

版权

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中的方法,确只被调用了一次,这是因为第二次是直接在缓存中取得的结果值.

如果我将初始值改变

在这里插入图片描述

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

weixin_43899442

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue计算属性的使用(computed)

vue计算属性的使用(computed)我们在一些数据需要实时响应,经常更新的地方使用计算属性,虽然说定义一个方法也可以,直接在{{}}中写入逻辑代码也行,但是难免看起来会有一点麻烦,并且后期也不易维护.比如:使用vue进行2个文本框中的数值求和,你可以直接在{{}}中进行运算<body> <div id="box"> <input type="tex...
复制链接

扫一扫