Vue基础知识-（四）计算属性

本文最后更新于：January 4, 2022 am

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

所谓的计算属性就是用已有的属性（data中的）进行加工计算，然后生成一个全新的属性。一个新的配置项：computed。

一般形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		
	</head>
	<body>
	<div id="root">
		姓：<input type="" v-model="firstName" /> <br><br>
		名：<input type="" v-model="lastName" /> <br><br>
		姓名：<span>{{name}}</span>
	</div>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'lee',
				lastName:'loong'
			},
			computed:{
				name:{
					//当使用name时，get会被调用，且返回值就作为name的值
					get(){
						return this.firstName+'-'+this.lastName
					}
				}
			}
		})
	</script>
	
	</body>
</html>

  • methods与computed的使用内部执行区别

在上面的示例中，使用methods也可以实现。但是两者还是有一定的区别。methods是调用一次就执行一次，调用多少次就执行多少次。而computed是只在第一次调用的时候执行，其他相同的调用都会从缓存中直接取用。只有数据发生了变化，computed才会再一次调用。

上面的是获取值，还可以修改值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'lee',
			lastName:'loong',
			age:18
		},
		computed:{
			name:{
				//当使用name时，get会被调用，且返回值就作为name的值
				get(){
					return this.firstName+'-'+this.lastName
				},
				//当需要修改时，set会被调用，且会收到修改的值
				set(value){
					this.age= value
				}
			}
		}
	})
</script>

计算属性的简写

📢注意：只能用于，只有获取值（get），没有修改值（set）的场景下。而且这种场景是比较多的。具体使用方法如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
//方法一
computed:{
  name:function(){
      return this.firstName+'-'+this.lastName
  }
}

//方法二
computed:{
  name(){
      return this.firstName+'-'+this.lastName
  }
}

📢注意：要注意方法二中的写法，和methods中的函数写法一样。但是调用的时候是有区别的。

methods与computed的调用区别

  • methods：调用时，写函数名，括号可加可不加。如：name()、name都可以。
  • computed：调用时，只能写属性名，不能加括号！如：name。

小结：每次调用前，先看看是data、methods还是computed中的属性或方法。

完整示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		
	</head>
	<body>
	<div id="root">
		姓：<input type="" v-model="firstName" /> <br><br>
		名：<input type="" v-model="lastName" /> <br><br>
		姓名：<span>{{name}}</span>
	</div>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'lee',
				lastName:'loong',
				age:18
			},
			computed:{
				name(){
					return this.firstName+'-'+this.lastName
				}
			}
		})
	</script>
	
	</body>
</html>