Vue深度监听新旧值一样原因&&解决办法

1,781 阅读1分钟

最近做项目时用watch监听数组里面的某一个对象时发现监听的对象新值和旧值打印出来是一样的,但是当对象比有变化时还是能监听到改变后的值

监听方法

watch: {
    number: {

            deep: true,

            handler(newVal, oldVal) {

            console.log('number.a', newVal.a, oldVal.a)

        }

    }
}

打印结果新旧值一样:

image.png

官方文档说明image.png

解决方案:

watch: {
    newNumber: {

            deep: true,

            handler(newVal, oldVal) {

            console.log('number.a', newVal.a, oldVal.a)

        }

    }
},
computed: {

    newNumber() {

        return JSON.parse(JSON.stringify(this.number))

    }

}