盒子
盒子
文章目录
  1. 计算属性
  2. this.aa和this.$data.aa
  3. 总结

Vue计算属性

之前对JavaScript中对象属性的访问器属性做过深入了解,现在看Vue的计算属性就是如出一辙,说到底 set/get就是一种数据表现形式的语法糖,不过Vue 在vm根实例上对于数据的操作方式我还是觉得可探讨的。由于初学Vue才疏学浅,暂不做过多深入理解,只是说说自己的见解啦。

计算属性

在View模板中, Vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
计算属性默认只是 getter ,所以你可以这样写:

1
2
3
4
<div id="app">
{{ aa }}
{{ bb }}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
var vm1 = new Vue({
el: '#app',
data: {
aa: 1,
bb: 0
},
computed: {
bb: function(){
return this.aa + 1;
}
}
})

结果:div中被渲染为1 2 。
完整的 computed还有set的,所以代码为:

1
2
3
4
5
<div id="app">
{{ firstName }}
{{ lastName }}
{{ fullName }}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var vm2 = new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B',
fullName: 'A B'
},
computed: {
fullName: {
set: function(value){
var names = value.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
},
get: function(){
return this.firstName + ' ' + this.lastName
}
}
}
})

this.aa和this.$data.aa

知识点并没有什么难理解的,而我的关注点在this.aathis.$data.aathis指的是vm这个对象,我发现this.aathis.$data.aa 在没有computed情况下,默认是指向同一个数据(数据形式可以是数值,数组对象等)的。就拿vm1来说,只对bb声明了计算属性,当程序执行后访问vm1.bb值为2,访问vm1.$data.bb值为0,此时修改vm1.bbvm1.$data.bb的值并不会相互影响对方 。对aa没有声明计算属性,访问vm1.aa == vm1.$data.aa

现在模板中数据是以形式呈现的,其实就是this.aa的值(作用域下的aa属性的数据,和angular的$scope.bb挺像),这里你也可以把改写成,这样就会和真正的内层数据同步了,而不用受vm1.bb的影响除非在computed中会改变内层数据的值 。其实想想,vm1.bb是不是就是对vm1.$data.bb的一层封装,起的是对外接口的作用。

总结

  • 当没有声明computed时候,this.aathis.$data.aa 默认是指向同一个数据,对this.aa所做的set/get操作均会同步反映着this.$data.aa,因为它两指向同一个数据嘛。
  • 当该数据被声明为computed后,由于set/get操作均在this.aa上处理,意味着在vm1这个对象上有个aa属性,此时并不是在处理vm1.$data.aa(还是指向原来的数据)。
支持一下
扫一扫