Object.assign无法正确复制

Question

我正在与VueJS合作。

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

然后我用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()，.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

您不必使用库，除非您确实需要一个深层副本（我不需要一个深层副本）。只需这样做：

this.editItem = {...item};

...运算符会将item分解为其键和值，由于您是在对象文字（{ }）中进行操作的，因此它将它们用作键和新对象的值。

可能会对像我一样不需要深复制的其他人有所帮助。 Object.assign不能直接使用，而可以。

Answer 3

如果您使用的方法不适用于涉及数据类型的对象，请尝试

import * as _ from 'lodash';

深层克隆对象

myObjCopy = _.cloneDeep(myObj);