问题解决: vue3开发中, 当修改了弹出框数据, 列表数据会一并修改。

问题描述：

        当在弹出框中修改数据时，列表数据会同步修改掉，此时我在弹出框还没点确定。当我点击取消时，列表页面数据已被修改。除非重置页面才会使数据恢复。如下图：

        这样的逻辑是完全不符合实际操作的。vue中很多组件绑定数据使用的v-model，给组件的对象赋值时也是用的form.value = res.data类似方式, 其实只是引用地址的赋值。

问题原因：

        使用了浅拷贝，导致直接将对象的引用地址赋值过去，因此修改时会同步更改原始数据。这是代码中存在的问题所在。

解决方案：

        使用 JSON.parse(JSON.stringify(state.selectTableList[0])) 来进行深拷贝。这样可以确保所有层级的数据都被独立复制，不会影响原始数据。只需要在弹出框绑定的:model="form"，因为打开弹框有一个异步查询，然后赋值给form的过程。(我这里的情况是这样)

原始赋值代码：

form.value = state.selectTableList[0]

修改后的赋值代码：

form.value = JSON.parse(JSON.stringify(state.selectTableList[0]))

此时问题已经解决：