element修改表单中的数据，表格中的数据直接修改问题

Posted 2022-03-05 水星记_

文章开头先给大家复现一下问题所在，如下图：

原代码

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不变，那就是深拷贝。