vue重置表单影响到另一个表单

问题说明

paramFormReset() {
  this.paramForm = {
    type: "integer",
    specs: {
      enumList: [{
        value: "",
        text: ""
      }],
      arrayType: "int",
    }
  };
  console.log("this.form.inputParam --> " + JSON.stringify(this.form.inputParam))
  this.resetForm("paramForm");
  console.log("this.form.inputParam --> " + JSON.stringify(this.form.inputParam))
}

打印结果：
this.form.inputParam --> {"type":"string","specs":{"enumList":[{"value":"","text":""}],"arrayType":"int","maxLength":"1024"}}
this.form.inputParam --> {"type":"integer","specs":{"enumList":[{"value":"","text":""}],"arrayType":"int","maxLength":"1024"}}

在上面代码中我重置了 paramForm 表单，但是 form 表单中的 inputParam 属性的 type 值也被重置了。

原因分析

在执行 paramFormReset() 方法之前，我将 paramForm 表单赋值给了 this.form.inputParam

this.form.inputParam = this.paramForm

这实际上是浅拷贝，this.form.inputParam 和 this.paramForm 指向同一个对象

解决方法

使用深拷贝

this.form.inputParam = JSON.parse(JSON.stringify(this.paramForm));