文章开头先给大家复现一下问题所在,如下图:
原代码
methods: {
// 编辑事件
modification(row) {
this.dialogVisible = true;//弹框显示
this.gather = row;//赋值操作
},
},
出现这种情况,一旦表单的数据被改变,表格中相对应的数据也会直接跟着改变,且无论是点击确定还是点击取消按钮,表格的数据依旧会被修改。这是为什么呢?
错误写法:
this.gather = row;//赋值操作
因为 row
是 Object
对象类型,如果直接赋值的话,就变成了浅拷贝,复制的是地址,导致在表单中改变值的时候表格中的数据也跟着改变,所以要进行深拷贝,将赋值操作改成以下形式:
正确写法:
this.gather = JSON.parse(JSON.stringify(row));//赋值操作
JSON.parse(JSON.stringify(obj))
这行代码的意思就是利用 JSON.stringify
将 js
对象序列化(JSON字符串),再使用 JSON.parse
来反序列化(还原) js
对象。序列化的作用是存储和传输。
注意:
这种方法只适用于一般数据的拷贝(对象、数组)。
拓展延伸
js
中有两种不同的数据类型,一种是基本数据类型,一种是引用数据类型,其中 Object
就是引用数据类型。
浅拷贝复制的是引用,深拷贝复制的是实体,简单的说,就是如果 b
复制 a
,现在修改 b
,如果 a
跟着改变,那就是浅拷贝,反之如果 a
不变,那就是深拷贝。