Vue深度监听对象时，新旧值一致时的解决方法

有时候我们定义了一个对象

data() {
        return {           
            obj: {
                num: 0,
            },           
        }
    }

想要深度监听它时，　

watch: {
        obj: {
            deep: true,
            handler(newVal, oldVal) {
                console.log(newVal.num, oldVal.num);
            }
        }
    }

会发现打印的新值和旧值是一样的

 这个时候可以使用计算属性，深拷贝我们想要监听的对象

computed: {
        obj1() {
            return JSON.parse(JSON.stringify(this.obj))
        }
    },

记得把watch里的监听对象名字一并修改

watch: {
        obj1: {
            deep: true,
            handler(newVal, oldVal) {
                console.log(newVal.num, oldVal.num);
            }
        }
    }

这个时候就可以正确打印新值和旧值啦