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监听一个对象中的属性