使用Object.assign()解决在Vue中使用Element- UI对用户信息编辑修改时不期望的同步修改问题

当我们使用Element- UI打算对用户信息进行修改时，我们发现在对话框修改的信息，在我按下“确定”按钮之前，可以看到外面的值也在实时同步发生改变，这是我们不希望看到的结果。

并且，当我们点击“取消”或者关闭对话框时，更糟糕的结果出现了，界面上居然暂存了我们没有确定的修改信息，手动刷新才消失，显然，这是严重影响用户体验的。

通过排查，我们发现，根本原因在于他们共用同一个对象，即同一个内存地址存储数据，就会出现这种不期望的结果。

明确原因之后，给出解决方法，即创建新的对象。利用Object.assign()从一个或多个源对象复制到目标对象，返回修改后的对象。原先有问题的代码如下：

handleEdit(row) {
      this.form = row
      this.dialogFormVisible = true
    },

 修改后的代码如下：

handleEdit(row) {
      this.form = Object.assign({},row)
      this.dialogFormVisible = true
    },

最后，还有一个小问题，那就是当用户点击了对话框之外的区域，对话框会自动关闭，为防止用户误触导致数据丢失产生的不必要的麻烦，我们通过查阅Element-UI官方文档去找是否有这样的属性可以修改，答案如下：

可以看到close-on-click-modal属性默认为true，那么我们只需要在对话框的属性中加入这样一行代码即可解决问题：

:close-on-click-modal = false

 

综上，记录下我在前端开发过程中遇到的细节问题，可能问题不大，没有明显报错，很多开发者也就没有多想。可是，当我们站在用户使用的角度去思考这个问题，发现这其实也算是一个BUG。提升用户交互体验，把难题留给自己，把便捷给予他人，是我们开发中应该追求的目标。细节往往决定成败，诸君共勉。