<转> vue watch对象内的属性监听(备忘)

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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
上一篇:JQuery_2.1.0_日记 5.4 Sizzle选择器(一) 正则中那些\\\\和\\


下一篇:PowerDesigner中将表的name在生成建表sql时生成注释