欢迎光临
我们一直在努力

监听复杂对象变化时 oldValue与newValue相同的解决办法

当使用监听监听对象时,会发现oldValue与newValue都会保持对最新数据的引用,但有时候我们希望查看原来的值。

解决方案:在计算属性中序列化、反序列化(或通过ES6解构赋值)生成新的对象,并使用watch监听该计算属性。

<body>
<div id="app"></div>
<script>
const app = new Vue({
    el: "#app",
    data: {
        obj: {
            a: 1,
            b: 2,
            c: 3
        }
    },
    // 创建计算属性 在这里可以保证每次obj发生变化时新旧keepObj的地址不同
    computed:{
        keepObj:function(){
            return {...this.obj}
            // return JSON.parse(JSON.stringify(this.obj));
        } 
    },

    mounted() {
        this.$watch('keepObj', (newValue, oldValue) => {
            newValue = ((val) => {
                let str = '{';
                for (let key in val) {
                    str += `${key}:${val[key]};`
                }
                str += '}';
                return str;
            })(newValue);
            oldValue = ((val) => {
                let str = '{';
                for (let key in val) {
                    str += `${key}:${val[key]};`
                }
                str += '}';
                return str;
            })(oldValue);
            console.log(`newValue=> ${newValue}`);
            console.log(`oldValue=> ${oldValue}`);
        }, {
            deep: true //必须开启深复制
        })
    }
})
</script>
</body>
赞(0) 打赏
未经允许不得转载:散人研 » 监听复杂对象变化时 oldValue与newValue相同的解决办法
分享到: 更多 (0)

评论 抢沙发

3 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏