本地副本更新时 vueJS-prop 正在发生变化

【问题标题】：vueJS- prop is being mutated when local copy updates本地副本更新时 vueJS-prop 正在发生变化
【发布时间】：2018-10-05 10:51:05
【问题描述】：

我的子组件模板有两个带有 v-models 的输入元素，如下所示。

<input v-model="user.name" />
<input v-model="user.email" />

props: {
   'account': {}
},
data: function() {
   return { user : this.account.user }
}

当输入字段中的文本发生变化时，用户对象正在被更新，这是预期的。但是道具account.user 也随着变化而更新。我怎样才能让它只更新 user 对象并保持 account.user 原样？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

这是因为在 Javascript 中，对象是通过引用传递的。当您执行user : this.account.user 时，您将对象引用传递给user 数据。这就是为什么当您编辑 user 数据时，account.user 也会被编辑，它们引用同一个对象。

您可以使用 ES6 扩展运算符克隆它。

return { user : {...this.account.user} }

如果你不使用 ES6，我建议你改用lodash clone。

return { user : _.clone(this.account.user) }

（顺便说一句，上面的克隆方法只适用于浅层对象。对于深度嵌套的对象，请改用 lodash cloneDeep。）

【讨论】：

谢谢。 cloneDeep 完成了这项工作。