奇怪的 Vuejs 道具行为与数组答案

【问题标题】：Weird Vuejs props behavior with arrays奇怪的 Vuejs 道具行为与数组
【发布时间】：2021-09-12 14:14:42
【问题描述】：

我创建了一个表单组件，在其中我将一个包含字符串和对象数组的对象道具传递给它。然后我将道具的元素转移到组件变量中，这样我就可以在不直接与道具交互的情况下编辑它们，如下所示：

beforeMount(){
    this.var1 = this.props.var1
    this.var2 = this.props.var2
    this.array = this.props.array
}

当我编辑所有其他变量时，关闭我的组件并再次打开它，除了数组之外，所有内容都会重置。每次我尝试与之交互时，重置都不会发生。我知道我在代码的任何部分都没有直接与道具交互，所以我真的不知道为什么当一切正常时会发生这种情况。要解决这个问题，我必须执行以下操作：

beforeMount(){
        this.var1 = this.props.var1
        this.var2 = this.props.var2
        this.props.array.forEach(element => {
           this.array.push(element)
        })
    }

为什么这完全有效？我也遇到了类似的问题，方法特定的变量在函数结束后没有重置，所以我觉得这些行为有点奇怪。我也在使用“v-if”并且还尝试使用组件键来重置组件，但无论出于何种原因它都不适用于数组。

【问题讨论】：

您也可以使用生命周期方法beforeDestroy 并清空您想要的所有变量/数组。你试过了吗？
还没有。我现在就试试。
我刚做了，没用。

标签： vue.js vuetify.js

【解决方案1】：

尝试像这样复制您的数组：

    this.array = [...this.props.array]

我不确定，但是当你在一个对象中传递它时，你实际上可能会使用你的数组作为参考，而不是你想要的值。

【讨论】：

完美。我认为 Vuejs 不建议将带有所有要传递给子组件的道具的对象传递给子组件。From vuejs doc :：请注意，JavaScript 中的对象和数组是通过引用传递的，所以如果道具是数组或对象，在子组件内改变对象或数组本身会影响父状态。
哦，这就是为什么我将其内容复制到组件变量中，这样我就不会以任何方式弄乱道具。这就是为什么它如此奇怪，因为当组件变量不会更新时，道具会保持不变。今天晚些时候好好研究一下。