vuejs 深度监听

data: {
    obj: {
      a: 123
    }
  },

监听obj中a属性

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

深度监听

watch: {
  obj: {
    handler(val, olVal) {
      console.log('我变化了', val, olVal)
    },
    immediate: true,
    deep: true
  }
}

immediate:true代表如果在 wacth 里声明了 obj 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

deep，默认值是 false，代表是否深度监听

 

如果obj发生了变化，就会打印出val，olVal，但是他们打印出来的结果都是一样的，因为数据同源。虽然可以监听到他的变化，但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。

data: {
  obj: {
    a: 123
  }
},

watch: { 
　　testDataNew: { 
　　　　handler: (val, olVal) => { 
　　　　　　console.log('我变化了', val, olVal) 
　　　　}, 
　　　　deep: true 
　　} 
}, 
computed: { 
　　testDataNew() { 
　　　　return JSON.parse(JSON.stringify(this.obj)) 
　　} 
}