Vue学习之—computed计算属性
1.当写computed属性的时候要注意
-
所有的计算属性,都要定义在computed 属性中;
-
计算属性在定义的时候,要定义成方法的形式,而且定义成方法的形式后,方法中一定要有返回值,因为使用计算属性最终要得到的就是返回的值;
-
计算属性最终会变成当前的Vue实例对象的属性;
2.computed属性的两种形式
- 2.1函数形式的计算属性
var vm = new Vue({
data: {
a: 1 },
computed: {
// 这种形式的计算属性只能够读取
property1: function () {
return this.a * 2
}
// 简写形式
property1(){
return this.a * 2
}
}
})
vm.property1 // => 4
注意:这里有一个小细节是很容易被忽视的
如果你为一个计算属性使用了 箭头函数
,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为计算属性函数的第一个参数来访问。
var app = new Vue({
data{
a = 2 },
computed:{
arrowFun:(vm) => {
return vm.a *= 2
}
}
})
vm.arrowFun // 4
- 2.2对象形式的计算属性
var vm = new Vue({
data: {
a: 1 },
computed: {
// 对象形式的计算属性可读写
property2: {
get: function () {
return this.a + 1
},
// val的值就是当这个计算属性发生改变时,赋予这个计算属性的值
set: function (val) {
this.a = val - 1
}
}
}
})
vm.property2 // => 2
vm.propert2 = 3
vm.a // => 2
3.使用computed属性的好处
-
好处1:实现了代码的复用;
-
好处2:只要计算属性中依赖的数据源变化了,则计算属性会重新求值;