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

這個時候就可以正確打印新值和舊值啦