Vue中watch對象內屬性的方法

vue提供了watch方法，用於監聽實例內data數據的變化。一般寫法是：

new Vue({
  data: {
    count: 10，
    blog:{
        title:'my-blog',
        categories:[]
    }
  },
  watch: {
    count: function (newval, oldVal) {
      console.log(`new: %s, old: %s`, newVal, oldVal);
    }
  }
})

上述狀況裏data中的count屬性能夠直接監聽，可是若是須要監聽的數據是對象內的某一屬性值的變化，直接watch對象blog是檢測不到變化的，這是由於blog這個對象的指向並無發生改變。有幾個解決方法

1.深度監測

new Vue({
  data: {
    count: 10，
    blog:{
        title:'my-blog',
        categories:[]
    }
  },
  watch: {
    blog:{
        handler(newVal,oldVal){
            console.log(`new: ${newVal}, old: ${oldVal}`);
        },
        deep:true
    }
  }
})

裏面的deep設爲了true，這樣的話，若是修改了這個blog中的任何一個屬性，都會執行handler這個方法。不過這樣會形成更多的性能開銷，尤爲是對象裏面屬性過多，結構嵌套過深的時候。並且有時候咱們就只想關心這個對象中的某個特定屬性，這個時候能夠這樣

2.用字符串來表示對象的屬性調用

new Vue({
  data: {
    count: 10，
    blog:{
        title:'my-blog',
        categories:[]
    }
  },
  watch: {
    'blog.categories'(newVal, oldVal) {
        console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  }
})

3.使用computed計算屬性

new Vue({
  data: {
    count: 10，
    blog:{
        title:'my-blog',
        categories:[]
    }
  },
  computed: {
    categories() {
      return this.blog.categories;
    }
  },
  watch: {
    categories(newVal, oldVal) {
      console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  },
})

Reference

計算屬性和偵聽器 — Vue.js
vue watch對象內的屬性監聽
Vue使用watch監聽一個對象中的屬性