Vue.js Object.assign 没有正确复制

发布于05月25日

我和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()和.map(a=>a)的数组，但没有任何效果.这两个对象保持绑定.

当我console.log(this.itemEditado)岁时，我得到了这个:

奇怪的是，在另一个Vue组件中，我使用了相同的策略，而且效果很好.

推荐答案

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支持的基本类型.