vue中watch监听不到变化的解决

// this.$set(object, key, value)
// 使用this.$set就可以监听到
this.$set(this.obj, 'a', Math.random())

 data () {
    return {
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。
    obj2 () {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        console.log('data变化了')
        console.log(newVal, oldVal)
      },
      deep: true
    }
  },

<template>
  <div>
    <button @click="clickFn">++++</button>
  </div>
</template>

<script>
export default {
  name: 'Mall',
  data () {
    return {
      // !监听时给每一个属性都添加getter和setter，变化了，就触发handler函数，如果后期添加属性，这个属性不可以被监听到
      // obj: {
      //   a: 10
      // }

      // !这种是不可以被监听到的
      // 因为watch是通过Object.defineProperty()给对象的每一个现有属性增加监听器
      // 在后面直接添加a属性，身上没有监听器，所以不会被监听到
      obj: {}
    }
  },
  computed: {
    // 如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。
    obj2 () {
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    obj2: {
      handler (newVal, oldVal) {
        console.log('data变化了')
        console.log(newVal, oldVal)
      },
      deep: true
    }
  },
  methods: {
    clickFn () {
      // this.obj.a = Math.random()

      // this.$set(object, key, value)
      // 使用this.$set就可以监听到
      this.$set(this.obj, 'a', Math.random())
    }
  }
}
</script>