vue watch對象內的屬性

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)
　　　　//這裏面能夠執行一旦監聽的值發生變化你想作的操做
　　}
  }