FCAT

Appearance

用到vue2侦听器的开发过程中发现，侦听变化数据得到的newVal和oldVal是相同的，如何解决呢？

解决newVal和oldVal相同的BUG ​

因为监听的数据是一个地址，所以newVal和oldVal都指向同一个地址，输出都是相同的。

可以利用深浅拷贝解决。

html
<script>
export default {
    computed: {
            Watcholdvalue() {
                return JSON.parse(JSON.stringify(this.FormData))
                // 因为计算属性一开始就执行了一次,相当于在一开始就深拷贝拿到了oldvalue,改变之后又再一次深拷贝,每一次深拷贝生成的对象都是指向不同的地址,所以oldvalue和newvalue是两个不同的地址.
        },
    },
    watch: {
        Watcholdvalue: {
                handler(newVal, oldVal) {
                    console.log(newVal,oldVal)
                },
                deep: true,
            },
    },
    data() {
        return {
            FormData: {
                realForm: [{
                    name: '',
                    kmbm: '科目编码1',
                    checked: false,
                    ptionsList: 'options_1',
                },]
            }
        }
    }
}
</script>
<script>
export default {
    computed: {
            Watcholdvalue() {
                return JSON.parse(JSON.stringify(this.FormData))
                // 因为计算属性一开始就执行了一次,相当于在一开始就深拷贝拿到了oldvalue,改变之后又再一次深拷贝,每一次深拷贝生成的对象都是指向不同的地址,所以oldvalue和newvalue是两个不同的地址.
        },
    },
    watch: {
        Watcholdvalue: {
                handler(newVal, oldVal) {
                    console.log(newVal,oldVal)
                },
                deep: true,
            },
    },
    data() {
        return {
            FormData: {
                realForm: [{
                    name: '',
                    kmbm: '科目编码1',
                    checked: false,
                    ptionsList: 'options_1',
                },]
            }
        }
    }
}
</script>