Vue学习：计算属性_计算属性 vue-CSDN博客

本文链接：https://blog.csdn.net/H215919719/article/details/127667317

计算属性

我们准备是实现一个加法的计算器,当用户输入了两个数字,我们就得到这两个数字的和,效果图如下:

我们可以使用很多方式来实现上述效果:

第一种: 使用插值实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
        .num {
            width: 30px;
            height: 20px;
            font-size: 16px;
            font-weight: bold;
        }

        .txt {
            font-size: 16px;
            font-weight: bold
        }
    </style>
	<script src="./js/vue.global.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		const {createApp} = Vue
        createApp({
            data(){
                return {
                    number1:0,
                    number2:0,
                }
            },
            methods:{
                sum:function(){
                    return parseInt(this.number1) + parseInt(this.number2);
                }
            }
        }).mount("#root")
	};
	</script>
</head>
<body>
    <div id="root">
        <input type="number" class="num" v-model="number1"/>
        <span class="txt">+</span>
        <input type="number" size="5" class="num" v-model="number2"  />
        <span class="txt">=</span>
        <span class="txt">{{sum()}}</span>
    </div>
</body>
</html>

第二种可以使用计算属性来实现:

计算属性: 就是对Vue对象中的data中的属性进行再加工或者计算得到的属性,我们称为计算属性.在Vue中,我们使用computed来设置计算属性.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style type="text/css">
        .num {
            width: 30px;
            height: 20px;
            font-size: 16px;
            font-weight: bold;
        }

        .txt {
            font-size: 16px;
            font-weight: bold
        }
    </style>
	<script src="./js/vue.global.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		const {createApp} = Vue
        createApp({
            data(){
                return {
                    number1:0,
                    number2:0,
                }
            },
            methods:{
                
            },
            computed:{
               sum:{
                    get(){  
                        //get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行
                        return parseInt(this.number1) + parseInt(this.number2); //此时的this就是vm
                    }
               }
            }
        }).mount("#root")
	};
	</script>
</head>
<body>
    <div id="root">
        <input type="number" class="num" v-model="number1"/>
        <span class="txt">+</span>
        <input type="number" size="5" class="num" v-model="number2"  />
        <span class="txt">=</span>
        <span class="txt">{{sum}}</span>
    </div>
</body>
</html>

此时我们就实现了两个数的相加,但是我们需要注意一点, 计算属性的get函数在什么时候被调用呢?

1) 计算属性初次被使用的时候

2) 所依赖的数据发送变化的时候

此时有人就好有一个疑问,我们使用插值与计算属性都能实现上述效果,但是它们有什么区别呢?

区别就是: 插值实现,如果使用多次,不会走缓存,sum()函数会被调用n次,但是使用计算属性,我们的计算属性会进行缓存, 所以使用多次,都不会重复调用get()函数

我们对计算属性提供了get()方法, 但是我们如果想去修改计算属性,我们也可以提供set()方法, 但是在实际开发中,我们几乎不会对计算属性提供set()方法,这是因为我们的计算属性一般都是为了读取,

computed:{
       sum:{ 
            get(){  
                    console.log('getter...');
                    return parseInt(this.number1) +parseInt(this.number2); 
                  },
              set(value){
                       console.log('setter被调用,计算属性修改成:'+value);
                     }
              }
 }

很少去修改计算属性.

计算属性的简写:

如果计算属性只提供get方法,那我们可以简写如下:

computed:{
 sum(){
         return parseInt(this.number1) + parseInt(this.number2); 
      }
}