官方文档中这样描述计算属性的:
类型:{ [key: string]: Function | { get: Function, set: Function } }
这句话的意思是:计算属性是用一个函数返回一个数据值,或者是定义了get方法和set方法的对象,来对原来响应式的数据进行设置或者获取。
比如:
var vm = new Vue({
el: '#test',
data: {
message: 'Hello',
a: 1 //在data中定义的数据就是响应式的
},
//计算属性的使用方法,当成一个数据属性来使用
computed: {
aDouble () {
return this.a * 2
},
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
console.log('init a = ', vm.a) // a = 1
//默认调用get方法取得a的值
console.log('plus 1 = ', vm.aPlus) // 2
//重新设置a的指,会调用set方法
vm.aPlus = 4
console.log('new a = ', vm.a) // a = 3