引言：
介绍有关计算属性的基本知识，
加油加油！！
计算属性和监听器
计算属性
对于任何的复杂处理都应该使用计算属性
例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <body>
<div id="example">
<p>Original msg:"{{msg}}"</p>
<p>Computed reversed msg:"{{revermsg}}"</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
msg:'这条信息会被逆转'
},
computed:{
revermsg:function () {
return this.msg.split('').reverse().join('');
}
}
})
</script>
</body>
|
当原属性发生变化的时候，vue会自动重新计算计算属性，他们俩都会变化
计算属性缓存vs方法
上述的例子，我们可以使用方法来解决
如：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="example">
<p>Original msg:"{{msg}}"</p>
<p>Computed reversed msg:"{{revermsg()}}"</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
msg:'这条信息会被逆转'
},
methods:{
revermsg: function () {
return this.msg.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
|
这两种方法（计算属性与方法）都可以达到效果，区别是：
计算属性是基于他们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时才会重新求值
意味着只要msg没有发生改变，多次访问reversemsg计算属性会立即返回之前的结果，而不必再次执行函数
因为拥有缓存，再次渲染的时候不需要重新计算该值，增加了渲染的速度
计算属性vs监听属性
计算属性一般会比监听更加的方便
例如：
监听属性
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
| <body>
<div id="demo">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:'#demo',
data:{
firstName:'foo',
lastName:'bar',
fullName:'foo bar',
},
watch:{
firstName:function(val){
this.fullName = val + ""+ this.lastName
},
lastName:function(val){
this.fullName=this.firstName+''+val
}
}
})
</script>
</body>
|
而使用计算属性就方便了许多
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<div id="demo">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:'#demo',
data:{
firstName:'foo',
lastName:'bar',
fullName:'foo bar',
},
computed:{
fullName:function(){
return this.firstName+this.lastName
}
}
})
</script>
</body>
|
当需要在数据变化时执行异步或开销大的操作时，这个方式是最有用的
计算属性的getter和setter
例子：
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
| <body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
},
computed:{
fullName: {
get(){
return this.firstName+' '+this.lastName
},
set(value){
var arr = value.split(' ');
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
|