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))
  }
}

 

posted @ 2019-09-18 17:02  青春无敌小宇宙  阅读(479)  评论(0编辑  收藏  举报