之前对JavaScript中对象属性的访问器属性做过深入了解,现在看Vue的计算属性就是如出一辙,说到底 set/get就是一种数据表现形式的语法糖,不过Vue 在vm根实例上对于数据的操作方式我还是觉得可探讨的。由于初学Vue才疏学浅,暂不做过多深入理解,只是说说自己的见解啦。
计算属性
在View模板中, Vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
计算属性默认只是 getter ,所以你可以这样写:1
2
3
4<div id="app">
{{ aa }}
{{ bb }}
</div>
1 | var vm1 = new Vue({ |
结果:div中被渲染为1 2 。
完整的 computed还有set的,所以代码为:1
2
3
4
5<div id="app">
{{ firstName }}
{{ lastName }}
{{ fullName }}
</div>
1 | var vm2 = new Vue({ |
this.aa和this.$data.aa
知识点并没有什么难理解的,而我的关注点在this.aa
和this.$data.aa
。this
指的是vm
这个对象,我发现this.aa
和this.$data.aa
在没有computed
情况下,默认是指向同一个数据(数据形式可以是数值,数组对象等)的。就拿vm1
来说,只对bb
声明了计算属性,当程序执行后访问vm1.bb
值为2
,访问vm1.$data.bb
值为0
,此时修改vm1.bb
或vm1.$data.bb
的值并不会相互影响对方 。对aa
没有声明计算属性,访问vm1.aa == vm1.$data.aa
。
现在模板中数据是以形式呈现的,其实就是this.aa
的值(作用域下的aa
属性的数据,和angular的$scope.bb
挺像),这里你也可以把改写成,这样就会和真正的内层数据同步了,而不用受vm1.bb
的影响除非在computed
中会改变内层数据的值 。其实想想,vm1.bb
是不是就是对vm1.$data.bb
的一层封装,起的是对外接口的作用。
总结
- 当没有声明
computed
时候,this.aa
和this.$data.aa
默认是指向同一个数据,对this.aa
所做的set/get
操作均会同步反映着this.$data.aa
,因为它两指向同一个数据嘛。- 当该数据被声明为
computed
后,由于set/get
操作均在this.aa
上处理,意味着在vm1
这个对象上有个aa
属性,此时并不是在处理vm1.$data.aa
(还是指向原来的数据)。