在Vue项目中，在表单中修改数据，表格数据也会被修改

问题描述：

在尝试修改表格中的数据时，即使用户在点击“取消”按钮后选择放弃修改并关闭窗口，表格中的数据仍然会显示为已修改状态。无论用户是否确认修改，数据都会被更改。只有在重新加载数据后，表格中的数据才会恢复为初始状态。

原有方案一：

在开始解决这个问题时，我的最初想法是在“取消”按钮的事件中添加一个加载数据的函数，每次取消并关闭窗口时重新发送请求来重新加载数据。但是，如果数据量很大，这种方法可能会影响用户体验，因为频繁请求加载可能会导致延迟。

原有方案二：

在重新查看代码后，我发现问题出在对象的赋值上。由于使用了浅拷贝，导致直接将对象的引用地址赋值过去，因此修改时会同步更改原始数据。这是代码中存在的问题所在。

这是原有的代码：

  const handleClick = (user: User) => {
    formData.value = user;
    visible.value = true;
  };

最初，我使用了对象扩展运算符（...）来拷贝对象，这确实可以复制对象的属性，但这种方式还只是进行浅拷贝。它只复制对象的第一层属性，如果对象中包含多层嵌套的对象，仍然是引用地址的赋值，因此这些嵌套对象会被同步修改。

  const handleClick = (user: User) => {
    formData.value = { ...user};
    visible.value = true;
  };

例子：

    const obj1={
        "name":"obj1",
        "age":12,
        "hobby":['a','b'],
        "user":{
            "a":1,
            "b":2
        }
    }
    const obj4={...obj1}
    obj4.name="张三"
    obj4.user.a=777
    console.log(obj1);
    console.log(obj4);

解决方案：

为了解决这个问题，我重新修改了代码，使用 JSON.parse(JSON.stringify(user)) 来进行深拷贝。这样可以确保所有层级的数据都被独立复制，不会影响原始数据。

    const obj1={
        "name":"lz",
        "age":12,
        "hobby":['a','b'],
        "user":{
            "a":1,
            "b":2
        }
    }
    // 深拷贝
    const obj3=JSON.parse(JSON.stringify(obj1))
    obj3.name="zhangsan666"
    obj3.user.a=666
    console.log(obj1);
    console.log(obj3);

使用深拷贝后，修改的就是独立的对象，不会影响原有对象。

以下是修改后的代码示例：

  const handleClick = (user: User) => {
    formData.value = JSON.parse(JSON.stringify(user));
    visible.value = true;
  };