vue中的深度监听（监听一个对象的全部属性、监听一个对象的一个属性）

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: '#app',
  data: {
    obj: {
      a: 66,
      b:'总'
    }
  }

监听一个对象的全部属性：

 watch: {
    obj: {
      handler(newName, oldName) {
         console.log('数据改变了');
      },
          //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: true, 
      deep: true // 开启深度监听，默认是false
    }
  }

监听一个对象的某一个属性：

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true
  }
}

————————————————
版权声明：本文为CSDN博主「尹东」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yinge0508/article/details/105818131