Question

我正在尝试将道具中的数据复制到本地data（）值中进行编辑，但是当我进行更改时，它会同时编辑两者。

export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      form: { ...this.item }
    }
  }
}

然后我将本地Form数据的Translations属性传递给另一个组件，该组件负责编辑

<tab
   v-for="translation in form.translations"
   :key="translation.locale.value"
   :name="translation.locale.value">
   <form-group :fields="translation" />
</tab>

在我的FormGroup组件中，我接收传递的字段，将其过滤掉，以使隐藏的字段不显示，然后进行编辑。

现在，当我进行编辑时，我在Vue检查器中看到来自父组件的原始项也在被编辑。

<script>
export default {
  props: {
    fields: {
      type: Object,
      required: true
    }
  },
  computed: {
    filtered () {
      return Object.keys(this.fields)
        .filter(field => this.fields[field].type !== 'hidden')
        .reduce((res, field) => Object.assign(res, { [field]: this.fields[field] }), {})
    }
  }
}
</script>

Answer 1

// Deep Clone, as per MDN web docs 
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

对象是非基本对象，与Number，String，Boolean等不同。这意味着它们是通过引用而不是值进行解析的。

因此，即使在各个组件之间，即使它们是道具，对象中的更改实际上也不是从子级更改道具，而是从父级更改道具，然后重新解析新版本，作为对象的更新版本。支柱。

export default {
    props: {
        data: {
            type: Object,
            required: true
        }
    },

    computed: {
        clonedData() {
            return JSON.parse(JSON.stringify(this.data))
        }
    }
}

详细了解参考与价值 https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

Answer 2

因为您在内存中编辑的对象是相同的引用，例如Array，Function和Object。

像这样，使用Object.assign()：

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

然后编辑obj2：

obj2.a = 33
console.log(obj1)  // { a: 0 , b: { c: 0}}

将对象Vue复制到本地数据

2 个答案: