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

原创已于 2025-06-09 16:46:47 修改 · 4.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2022-03-03 09:50:32 首次发布

JS 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了JavaScript中对象赋值引发的表单数据与表格数据同步更改的问题。当直接使用`this.gather = row`进行赋值时，由于JavaScript的对象引用特性，导致表单修改会影响原始数据。解决方法是通过`JSON.parse(JSON.stringify(row))`实现深拷贝，确保表单修改不会影响表格数据。文章还介绍了JavaScript的浅拷贝和深拷贝概念，并提醒读者此方法仅适用于简单数据类型的拷贝。

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

在这里插入图片描述

原代码

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