VueJS自己实现监视方法的疑问

问题遇到的现象和发生背景

VueJS中想模拟一个监视的方法,使用一个方法,处理前将数据存入oldData,处理后将newData和oldData进行比较

问题相关代码,请勿粘贴截图
methods: {
        change(e) {
            var oldData = this.dataList[e.target.id]  //将处理前的对象赋值给临时对象
            console.log("处理前:", oldData.isDis)   //输出false
            this.dataList[e.target.id].isDis = !this.dataList[e.target.id].isDis // 数据处理
            console.log("处理后:", oldData.isDis)  //输出true  有变化
            var newData = this.dataList[e.target.id]  
            console.log("old:", oldData.isDis, "new:", newData.isDis)  //新旧数据  无变化
        },
}
运行结果及报错内容

输出:
处理前: false
处理后: true
old: true new: true

我的解答思路和尝试过的方法

难道处理前的赋值,是一个指针么?

我想要达到的结果

我的意图是:处理前赋值一个临时对象,处理后把临时对象和改变后的对象进行比较,以判断对象内哪个数据发生了改变

看代码oldData 是对象,地址引用,修改对象属性值后,所有引用到这个对象的变量,被修改的属性值都会变。

            var isDis = this.dataList[e.target.id].isDis  //将处理前的对象赋值给临时对象
            var oldData = JSON.parse(JSON.stringify(this.dataList[e.target.id]));///生成新对象

            console.log("处理前:", oldData.isDis)   //输出false
            this.dataList[e.target.id].isDis = !this.dataList[e.target.id].isDis // 数据处理
            console.log("处理后:", oldData.isDis)  //输出true  有变化
            var newData = this.dataList[e.target.id]
            console.log("old:", oldData.isDis, "old:", isDis, "new:", newData.isDis)  //新旧数据  无变化

img


有其他问题可以继续交流~

直接获取isDis 的值,然后比较isDis的值。

var isDis = this.dataList[e.target.id].isDis 

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632