vue中的计算属性computed

Bertha 。 2021-07-25 13:36 530阅读 0赞

**目录**

一，计算属性的基本使用

二，计算属性的get与set

三，计算属性与方法的区别

--------------------

Vue计算属性：更强大的属性声明方式，可以对定义的属性进行**逻辑处理**和**数据监视 。**逻辑处理就是在计算属性内可以执行一些自己写的逻辑，数据监视就是计算属性内的返回值是依赖其他属性的变化而变化

## 一，计算属性的基本使用 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>02_computed</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : 'div',
    					data : {
    						msg : ''
    					},
    					computed : {
    						msg1 : function(){
    							return this.msg.toUpperCase();
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			<input type="text" v-model="msg" /><br />
    			原样显示：<h1>{
       {msg}}</h1><br /> 
    			大写显示：<h1>{
       {msg.toUpperCase()}}</h1><br />
    			计算属性显示：<h1>{
       {msg1}}</h1><br />
    		</div>
    	</body>
    </html>

![20190915123204583.png][]

## 二，计算属性的get与set ##

计算属性默认有get,但是默认没有set，需要手动写set

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>03_computed_01</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : 'div',
    					data : {
    						num : 0
    					},
    					computed : {
    						num1 : {
    							get : function(){
    								return parseInt(this.num) + 10;
    							},
    							set : function(value){
    								this.num = value;
    							}
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			<input type="text" v-model="num" /><br />
    			原样显示：<h1>{
       {num}}</h1><br />
    			<input type="text" v-model="num1" /><br />
    			计算属性显示：<h1>{
       {num1}}</h1><br />
    		</div>
    	</body>
    </html>

![2019091512410370.png][]

## 三，计算属性与方法的区别 ##

1.  计算属性有缓存机制，方法没有；
2.  只要计算属性内相关依赖的值不发生改变，多次调用计算属性可以从缓存中获取值，不必重复计算；
3.  方法每次调用都要重新执行一遍；

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>04_computed_02</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : 'div',
    					data : {
    						msg : 'sikiedu'
    					},
    					computed : {
    						msg1 : function(){
    							console.log("### computed");
    							return this.msg.toUpperCase();
    						}
    					},
    					methods : {
    						upperCase(){
    							console.log("$$$ methods");
    							return this.msg.toUpperCase();
    						},
    						show(){
    							console.log("点击了show按钮")
    							console.log("计算属性 ：" + this.msg1);
    							console.log("方法调用 ：" + this.upperCase());
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			<input type="text" v-model="msg" /><br />
    			原样显示：<h1>{
       {msg}}</h1><br />
    			计算属性显示：<h1>{
       {msg1}}</h1><br />
    			方法显示：<h1>{
       {upperCase()}}</h1><br />
    			<button @click="show">show</button>
    		</div>
    	</body>
    </html>

![20190915125246253.png][]![20190915125302884.png][]

例：

<template>
      <div>
    	 原样显示：<input type="text" v-model="msg" />
    	 <br /><br />
    	 计算属性显示：<h1>{
       {msg1}}</h1>
    	 方法显示：<h1>{
       {upperCase()}}</h1>
    	 <button @click="show()">button</button>
      </div>
    </template>
    <script>
    export default {
      data(){
    	  return{
    		  msg:'hello'
    	  }
      },
      computed:{
      	  msg1(){
    		  console.log('computed!')
      		  return this.msg.toUpperCase()
      	  },
    	  test:function(){
    		  return 'hello'
    	  },
    	  test1(){
    		  return'hello'
    	  }
    	  
      },
      methods:{	
    	  upperCase:function(){
    		  console.log('methods')
    		  return this.msg.toUpperCase()
    	  },
    	  show:function(){
    		  console.log('点击了show按钮')
    		  console.log('计算属性：'+this.msg1)
    		  console.log('方法调用：'+this.upperCase())
    	  }
      }
    }
    </script>

![20191023171231459.png][]![2019102317123756.png][]

此时改变值：

![20191023171253254.png][]![20191023171257139.png][]![20191023171301871.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

相同点

1：methods和computed都可以当作方法来使用

2：在定义的时候如下两种写法都可以

![20191023171900528.png][]

不同点

1：调用方式不同。在调用的时候，computed计算属性的方式不能有括号   ()，而methods的方式需要加上括号()

![20191023171929468.png][]

2：Computed是依赖其他属性的，也就是说，只有当它依赖的属性发生变化时才会触发这个计算属性，然后以函数的形式返回结果。多次调用计算属性可以从缓存中获取值，不必重复计算。另外，可以像绑定普通属性一样绑定计算属性。

而methods是不依赖其他属性的，每次调用方法都会执行方法内的逻辑。

[20190915123204583.png]: /images/20210725/4fea41455487409bbe58935315a94ff9.png
[2019091512410370.png]: /images/20210725/53d01085f3d14f429e25db345e4570b7.png
[20190915125246253.png]: https://img-blog.csdnimg.cn/20190915125246253.png
[20190915125302884.png]: /images/20210725/a607307e711945ec9a4dc758843d860f.png
[20191023171231459.png]: https://img-blog.csdnimg.cn/20191023171231459.png
[2019102317123756.png]: /images/20210725/b23fb96286a543b2a863a7bd1d1f87b7.png
[20191023171253254.png]: https://img-blog.csdnimg.cn/20191023171253254.png
[20191023171257139.png]: https://img-blog.csdnimg.cn/20191023171257139.png
[20191023171301871.png]: https://img-blog.csdnimg.cn/20191023171301871.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/f32268c21a5b4800b70b2df4c157b821.png
[20191023171900528.png]: /images/20210725/c00a7340ac5e4ddd92eefa6af809720c.png
[20191023171929468.png]: /images/20210725/6c9a216f55d84de79599eecbea7ce2de.png