Vue监听对象的变化(深度监听)

[powerdong]

方法一: 监听单个对象单个属性的变化

这种方法适合只需要监听对象某一个属性的情况，使用起来也很简单那，将 watch 属性的名称定义为对象名.属性名的形式就好了

data: {
   a: {
     b: 'Hello',
     c: 'world'
   }
 },
 watch: {
   a: function(newValue, oldValue) {
     console.log(oldValue, newValue)
   },
   'a.c': function(newValue, oldValue) {
     console.log('你修改了a对象(a.c)', newValue, oldValue)
   }
 },

方法二: 使用 computed 来辅助实现

此方法能实现对象多个属性的监听，而且不局限于单个对象，可定制化更高，缺点就是有点 low

data: {
  a: {
    b: 'Hello',
    c: 'world'
  }
},
computed: {
  changeA() {
    return {
      b: this.a.b,
      c: this.a.c
    }
  }
},
watch: {
  a: function(newValue, oldValue) {
    console.log(oldValue, newValue)
  },
  changeA: function(newValue, oldValue) {
    console.log('你修改了a对象(computed)', newValue, oldValue)
  }
},

方法三: vue 官方提供的方法

data: {
  a: {
    b: 'Hello',
    c: 'world'
  }
},
watch: {
  a: {
    handler: function(newValue, oldValue) {
      console.log('你修改了a对象(watch deep)', newValue, oldValue)
    },
    deep: true
  }
},