vue项目中的deepClone

  因为涉及到组件传值和表单双向绑定问题，要将后端返回的数据从value渲染为对应的text，免不了修改原数据，原数据就算赋值给别的变量，其内存地址还是一致，那样一旦在js中修改其中任意一项，提交时会造成返回和提交的数据格式不一致,从而出现修改和详情弹窗的各种bug，为了渲染正确的下拉框和树形结构绑定的数据，于是在项目中使用了深拷贝...

错误示范：

editrow(val) {
   this.editFormData = {};
   this.editFormData = val;
   this.editDialogVisible.show = true;
   this.editFormData.data=123;  //此时val中对应的数据也会改变！
}

deepClone

export default function deepClone(target){
       // 定义一个变量
       let result;
       // 如果当前需要深拷贝的是一个对象的话
       if (typeof target === "object") {
         // 如果是一个数组的话
         if (Array.isArray(target)) {
           result = []; // 将result赋值为一个数组，并且执行遍历
           for (let i in target) {
             // 递归克隆数组中的每一项
             result.push(deepClone(target[i]));
           }
           // 判断如果当前的值是null的话；直接赋值为null
         } else if (target === null) {
           result = null;
           // 判断如果当前的值是一个RegExp对象的话，直接赋值
         } else if (target.constructor === RegExp) {
           result = target;
         } else {
           // 否则是普通对象，直接for in循环，递归赋值对象的所有值
           result = {};
           for (let i in target) {
             result[i] = deepClone(target[i]);
           }
         }
         // 如果不是对象的话，就是基本数据类型，那么直接赋值
       } else {
         result = target;
       }
       // 返回最终结果
    return result;
}

每次编辑或查看详情的时候深拷贝一份数据，修改拷贝后的数据，不会造成一些意外的bug

import deepClone from "../../../utils/deepClone";

 editrow(val) {
      let data = deepClone(val);
      this.editFormData = {};
      this.isEdit = true;
      let tempArr = data.roleList.map((item) => {
        return item.id;
      });
      this.editFormData = data;
      this.editFormData.roleList = tempArr;

      this.viewFormItems[0].props.list[0].children.forEach((item, index) => {
        if (this.editFormData.companyName == item.label) { 
          this.editFormData.organizationId = item.id;
          this.editFormData.mark = item.parentId;
        }
      });
      this.editDialogVisible.show = true;
    },


    detailrow(val) {
      let data = deepClone(val);
      this.detailFormData = data;
      let temp = this.detailFormData.roleList.map((item) => {
        return item.roleName;
      });
      let tempValue = "";
      temp.forEach((item) => {
        tempValue += item + " ";
      });
      this.detailFormData.roleList = tempValue;
      this.detailDialogVisible.show = true;
    },

   这样提交修改时便会少很多bug~

 handleEditSubmit(val) {
      this.editDialogVisible.show = false;
      if (val != null && val.id != null) {
        this.editFormData.mark = val.parentId;
        this.editFormData.organizationId = val.serveID;
      } else this.editFormData.organizationId = this.editFormData.companyId;
      var paramData = JSON.parse(
        JSON.stringify(this.editFormData).replace(/roleList/g, "roleIdList")
      );
      var that = this;
      request({
        url: "/api-user/usergroup/update",
        method: "put",
        data: paramData,
      })
        .then((res) => {
           that.handleRequestData();
            })
      
    }
}