vue可以通过watch监听data内数据的变化。通常写法是:
new Vue({
data: {
a: 100,
msg:{
channel:'音乐',
style:'活泼'
}
},
watch: {
a: function (newval, oldVal) {
console.log('new: %s, old: %s', newval, oldVal)
}
}
})
但是如果你要监听的数据是对象内的某一属性,直接watch对象的属性(eg:msg.channel)就会报错
而监听整个对象的时候(eg:msg)会发现无论何时newval和oldVal的值都是一样的,这是因为msg这个对象的指向并没有发生改变,所以需要深度监测
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
如果监听对象内的某一具体属性,可以通过computed做中间层来实现
computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
//这里面可以执行一旦监听的值发生变化你想做的操作
}
}