【BUG修复】antV组件库中表格数据的双向绑定问题

在交流群里发现大佬们喜欢写文章来记录自己的成长，于是乎从今天起，我希望我也可以坚持下去，向大佬们看齐。水平有限，还望大佬们海涵。

正文：最近在修改一些项目中的bug，遇到了一个这样的问题:

这里是使用antV组件库创建的一张图表，希望在编辑的时候弹出一个对话框，然后在对话框中修改数据再保存到数据库中。 不过由于原有写法使用了双向绑定来简化逻辑，在编辑的时候，输入框中的数据会影响视图：

<a-form-item label="名称" name="Name">
<a-input v-model:value="formItem.Name" placeholder="请输入名称" /></a-form-item>
<a-button size="small" type="link" @click.stop="onAdd(record)">编辑</a-button>
//回调函数：
    onAdd(val) {
      this.visible = true;
      if (val != undefined && val) {
        this.formItem = val;
      }
    }

起初发现这个问题的时候，我不太明白表单的数据怎么就影响到表格了。（因为不是我写的嘛）检查之后发现，input输入框双向绑定了formItem.Name数据；而在回调函数中，竟然直接对相应的数据进行了修改。打印参数发现这个表格中record传递的参数确实是一个响应式对象；

因此不能使用this.formItem = val;这样赋值，作为一个程序员，熟悉的朋友应该明白这种为对象赋值的方式，仅仅为其分配了相同的内存地址，最终指向的是同一个对象。于是乎换一种赋值方式就好了。

这里可以看出，他想拿到record中的数据添加到输入框里，可以帮助用户少打一点字。

为了使得代码更加简洁，使用...解构过更为美观，且易于维护；修改一行代码就可以完美解决啦：

this.formItem = {...val}；

但既然说到这里了，这种写法还是有缺陷，因为这样解构属于浅拷贝。假如val中嵌套了其他对象，就可能产生一些其他隐患。不过目前这种情况不会出现在项目中。可以这样做。假如真的需要有深拷贝的场景，那也比较简单。比如可以使用JSON解析：

this.formItem = JSON.parse(JSON.stringify(val));

或者直接使用现成的库，亦或者你也可以写一个递归来完成。总之都有现成的解决方案。网上一搜一大把。

总结：在关注项目逻辑时要时刻注意一些技术问题，有些问题其实特别简单。但是一旦出错了还是需要花费时间解决，增加了成本。关于对象的赋值问题是很多新手常犯的错误。有经验的程序员如果忽视的话，也有可能出错。我自己也重新学习了一遍数据类型的知识，希望我们一起进步吧。