Vue关于数组push时覆盖之前数据的问题

问题复现：

我们封装封装了一个TransferInfo.vue的组件，并且在App.vue中引入他。然后在TransferInfo.vue中使用到了封装的dialog组件以及一个用于显示用户填写数据的表单组件。首先用户点击新增会打开这个dialog并且可以填写所需数据，当用户点击dialog中保存按钮时，我们会通过注册的点击事件对TransferInfo.vue传值。

submitForm() {
    this.$emit('showInfo', this.form)
    this.dialogShow = false
},

它通过this.$emit注册了一个事件，并且在TransferInfo.vue中使用它。它可以获得一个形参用户接收dialog组件中传过来的值。

showInfo(e) {
    this.info.push(e)
},

我们在data中定义了一个变量名为info的数组，并且通过push使dialog组件中传过来的值能存入进去。并且再次通过Vue的props向表单组件传送需要显示的数据，表单组件会通过v-for遍历，显示用户新增次数的数据。

<flyInfo :info="info" @delData="delData"></flyInfo>

此时数据处于正常传入表单组件并且可以正常显示的状态。

但是我们发现，当用户新增第二条数据的时候，那么第一条数据中的值会被第二条数据中的值覆盖。

解决办法：

方法一：

showInfo(e) {
    this.info.push(JSON.parse(JSON.stringify(e)))
},

这里使用深拷贝创建一个新对象，它与该对象与原对象完全独立，即使修改新对象也不会影响到原对象。

方法二：

showInfo(e) {
    this.info.push(toRaw(e))
},

这里使用toRaw获取原始对象，普通对象被push是新增一个存储，跟原对象没关系