https://www.jianshu.com/p/9ada0b5f04d5?utm_campaign
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) //这里面可以执行一旦监听的值发生变化你想做的操作 } }
尊重版权哦!
作者:形影相随_371e链接:https://www.jianshu.com/p/9ada0b5f04d5
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。