【Vue】解决watch监听对象类型变量oldVal和newVal相同问题

问题场景

<template>
    <section>
      <input  v-model="obj.a">
    </section>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        a: 1
      }
    }
  },
  watch: {
    obj: {
      handler (newVal, oldVal) {
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      deep: true
    }
  }
}
</script>

此时，设置deep: true可以监听到obj.a的变化

而在打印的结果发现新值和旧值却是一样的

解决方法

添加computed

<template>
    <section>
      <input  v-model="obj.a">
    </section>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        a: 1
      }
    }
  },
  computed: {
    newObj () {
      // 对 obj 进行深拷贝
      return JSON.parse(JSON.stringify(this.obj))
    }
  },
  watch: {
    newObj: { // 监听新值
      handler (newVal, oldVal) {
        console.log('newVal', newVal)
        console.log('oldVal', oldVal)
      },
      deep: true
    }
  }
}
</script>

利用computed缓存依赖需要监听的对象

然后又对存在对象进行一个监听，从而获取前后值的变化