如何克隆道具对象并使其不反应[重复]

我有一些表单数据，我通过道具与子组件共享。现在我想克隆 prop 对象并使其不响应。就我而言，我希望用户能够修改 props 值，而无需实际更改克隆值。克隆值应该仅用于向用户显示编辑时的表单内容。下面的代码显示了这一点：

    <template>
        <div>
            <div v-if="computedFormData">
                original prop title: {{orgData.title}}

                new title:
                <input type="text" v-model="formData.title"/> 
                //changing data here will also change orgData.title
            </div>

        </div>
    </template>

    <script>
        export default {
            props: ['formData'],
            data() {
                return {
                    orgData: [],
                }
            },
            computed: {
                computedFormData: function () {
                    this.orgData = this.formData;
                    return this.orgData;
                },
            },
            methods: {
            },
        }
    </script>

我尝试过Object.freeze(testData);但它不起作用，测试数据和/或数据都是反应性的。另请注意，使用mounted or created属性不呈现 orgData 所以我被迫使用computed财产。

尝试复制 prop 值对象.分配 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign。不再有反应性问题，因为新分配的值只是副本而不是对源的引用。

如果您的数据对象要复杂得多，我建议深度合并 https://github.com/TehShrike/deepmerge代替Object.assign.

Vue.component('FormData', {
  template: `
    <div>
      <div v-if="testData">
        <p>Original prop title: <strong>{{orgData.title}}</strong></p> 
        <p>Cloned prop title:</p>
        <input type="text" v-model="testData.title" />
      </div>
    </div>
  `,

  props: ['orgData'],

  data() {
    return {
      testData: Object.assign({}, this.orgData)
    }
  }
});

const vm = new Vue({
  el: '#app',

  data() {
    return {
      dummyForm: {
        title: 'Some title'
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <form-data :org-data="dummyForm"></form-data>
</div>