计算属性与监听器
计算属性 computed
data对象里面的是普通声明的属性property,还有一类属性,它们存在于computed
对象中,叫做计算属性
。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
很明显,在上面的例子中,function函数是作为reversedMessage属性的getter函数。
那我们为什么需要计算属性呢??????
在我们的例子中,计算属性reversedMessage的值是要依赖普通属性message的,因此,我们就把这种需要依赖多种属性的属性叫做计算属性
。
上面我们介绍了计算属性的getter,现在我们要介绍计算属性的setter,通过赋值会改变计算属性,因此计算属性以来的普通属性也需要相应的进行改变,当然,这需要我们手动设置。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: {
get () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
},
set(newValue) {
this.reversedMessage = newValue
// 显示的改变message这个属性的value
this.message = this.reversedMessage .split('').reverse().join('')
}
}
})
监听器 watch
在一个Vue实例里面,还包含一种对象,我们叫它监听器属性 watch,简单来说就是用 watch 来监听属性的更新。
我们为什么有需要监听器属性呢??????????
一个属性会影响其他多种属性的时候,我们就需要监听这个重要的属性,从而及时更新被影响的属性。
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
change:true
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
watch: {
// 当change改变时,就会影响message的值,因此需要监听
change: function(){
this.message = '1234567'
}
}
})
计算属性的setter和watch有些相似,我个人更倾向于使用监听器,因为就不需要我们时刻调用setter,watch会时刻帮助我们关注监听的属性,一旦发生变化就会响应。