Object.assign无法正确复制

Question

我正在使用VueJS。

我有一个接收对象作为参数的方法。

然后，我用复制该对象Object.assign()。

Component.vue

export default {
  // ...
  methods: {
    // ...
    activateEditMode (item) {
      this.editItemIndex = this.travelItinerary.indexOf(item)
      this.editItem = Object.assign({}, item)
      // ...
    }
  }
}

原始对象位于this.roteiroCompleto[0]：

但是当我编辑克隆对象时this.itemEditado：

原始对象this.roteiroCompleto[0]也会更改。

我试图复制每个键和值，仅复制带有.slice()，的Array ，.map(a=>a)但没有任何效果。这两个对象保持绑定。

当我console.log(this.itemEditado)得到这个：

奇怪的是，在另一个Vue组件中，我使用了相同的策略，并且有效。

Answer 1

Object.assign 仅对键和值进行浅表复制，这意味着如果对象中的值之一是另一个对象或数组，则它与原始对象上的引用相同。

var x = { a: 10, b: { c: 100 } };
var y = Object.assign({}, x);

y.a = 20;
console.log( x.a, y.a ); // prints 10 20

y.b.c = 200;
console.log( x.b.c, y.b.c ) // prints 200 200

要深层复制对象，可以在lodash中使用诸如cloneDeep函数之类的东西，也可以使用带有内置函数的更丑陋的方法JSON.parse( JSON.stringify( obj ) )。

请注意，第二个选项仅适用于JSON支持的原始类型。

Answer 2

如果你使用的方法不能很好地处理涉及数据类型的对象，试试这个

import * as _ from 'lodash';

深度克隆对象

myObjCopy = _.cloneDeep(myObj);