Question

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

在此说明您不应变异道具。此外，它说：

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

在本节的底部，有一个注释，指出：

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

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

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

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

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

在此先感谢您的帮助。

Answer 1

您可以简单地将其克隆-

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

为避免这种情况。

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

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

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

在我的偏爱中，每当您希望为整个项目更新值时，都应该使用Vuex

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

1 个答案: