[JavaScript知识库]vue2 功能：取消编辑表单显示原数据

问题

如图点击修改之后对可修改的表单进行编辑。

要实现点击取消，恢复原数据显示。（这里的功能其实跟之前修改表格，取消导致原数据出现数据消失问题解决原理一样，都是要深拷贝数据之后再进行回显）

解决

data

  data() {
    return {
      // userinfo form
      userForm: {},
      // store old  userinfo form
      editUserForm: {},
    }
  },

html

            <el-form-item v-if="updateMark">
              <el-button @click="stateOfUpdatechange($event)">修改</el-button>
            </el-form-item>
            <el-form-item v-else>
              <el-button type="primary" @click="updateUserInfo" plain> 确认</el-button>
              <el-button type="danger" @click="stateOfUpdatechange" plain> 取消</el-button>
            </el-form-item>

js(使用JSON.parse(JSON.stringify())对数据进行深拷贝）

    // state of edit change
    stateOfUpdatechange(e) {
      console.log(e.target)
      this.updateMark === true ? (this.updateMark = false) : this.updateMark = true
      // back to  old form data
      this.disedit === true ? (this.disedit = false, this.userForm = this.editUserForm) : (this.disedit = true, this.editUserForm = JSON.parse(JSON.stringify(this.userForm)))
    },

思考

case 1

在搜索资料的时候，看到有用Object.assign做拷贝的。阮一峰解释

Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

case 2

let source = { a: 1 };
let target = Object.assign({}, source);
console.log(target)  // { a: 1 }

source.a = 2;
console.log(source)  // { a: 2 }
console.log(target)  // { a: 1 }

1. target的值并没有随着source的变化而变化。
2. JS对象分为基础类型和引用类型，基础类型(number,string,boolean,null,undefined)直接存储于栈中，引用类型(object，array，date…)栈中存储指向存储在堆中的对象的指针。
3. 对于拷贝对象中有引用类型的数据，为浅拷贝，有基本数据，则是深拷贝。