改变 Prop 对象的数据副本是否比改变 prop 更好？为什么？答案

【问题标题】：Is Mutating a Data copy of a Prop object any better than mutating a prop? Why?改变 Prop 对象的数据副本是否比改变 prop 更好？为什么？
【发布时间】：2019-07-01 16:36:27
【问题描述】：

在 Vue 文档中有一节关于单向数据流：https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

这里解释了你不应该改变一个道具。此外，它说：

prop用于传入一个初始值；子组件之后希望将其用作本地数据属性。在这种情况下，最好定义一个使用 prop 作为初始值的本地数据属性：

在本节的底部，有一条注释说：

请注意，JavaScript 中的对象和数组是通过引用传递的，因此如果 prop 是数组或对象，则在子组件内改变对象或数组本身会影响父状态。

我正在考虑这样一种情况：您有一个作为对象（或数组）的道具，并且您定义了一个使用该道具作为其初始值的本地数据属性：

props: {
        initialMyObject: {
            type: Object,
            required: true
        }
    },

data() {
    return {
        myObject: this.initialMyObject
    }
}

如果我改变数据项myObject，因为它是一个对象，所以道具本身最终会发生突变。因此，这是否与“改变道具”本质上相同并且要避免？在这种情况下，无论何时需要对对象进行更改（或使用 Vuex）都发出一个事件会更好吗？

在此先感谢您的帮助。

【问题讨论】：

正确。从单向数据流的角度来看，在数据中使用别名并不比通过其 prop 名称改变同一个对象更好。

标签： vue.js vuejs2

【解决方案1】：

你可以简单地克隆它 -

data() {
    return {
        myObject: {...this.initialMyObject}
    }
}

为了避免它。

但是是的，您不能将值重新分配给 prop

这只是因为Object 是一种参考内存。当您将 Array 或 Object 存储在任何变量中时，它就是一个引用变量。

在这种情况下的内存管理，引用变量将指向堆中的内存地址，因此您可以向地址添加更多 n 更多的值。但是，即使使用新地址，您也不能只用任何新值替换该地址。

在我的偏好中，您应该更喜欢 Vuex，只要您希望为整个项目更新值

【讨论】：