Vue学习：计算属性

「爱情、让人受尽委屈。」 2023-10-04 19:46 38阅读 0赞

#### 计算属性 ####

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

![695fc424d73b462383041089df827088.png][]

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

第一种: 使用插值实现

<!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); 
          }
    }

[695fc424d73b462383041089df827088.png]: https://img-blog.csdnimg.cn/695fc424d73b462383041089df827088.png