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