如何在不修改 vue 3 中的道具的情况下使用道具初始化状态答案

【问题标题】：how to initialize state with props without modifying props in vue 3如何在不修改 vue 3 中的道具的情况下使用道具初始化状态
【发布时间】：2020-10-13 23:41:44
【问题描述】：

我在我的 vue 3 组件中初始化状态如下：

data() {
    return {
        new_listing: this.listing //which is a prop
    }
}

但是，当我将它绑定到输入时：

<input type="text" placeholder="title" v-model="new_listing.title" />

预期的结果是只有new_listing.title 发生变化，但道具listing 似乎也发生了变化。我该如何做到这一点，以便只有状态 new_listing.title 发生变化，而不是道具 listing.title。

【问题讨论】：

标签： javascript vue.js object vuejs3

【解决方案1】：

您需要克隆该对象（制作一个新副本）。

在 javascript 中，当将对象分配给变量时，它不会创建该对象的新副本。相反，它通过引用原始对象来分配它。

因此，根据您问题中的代码，执行{ new_listing: this.listing } 会将this.listing 对象的引用分配给new_listing。这意味着修改new_listing 也会修改this.listing：

要克隆对象在 ES6+ 中，您可以执行以下操作。 ... 是 spread syntax。在这种情况下，这是一种克隆对象的方法。

data() {
    return {
        new_listing: {...this.listing} //which is a prop
    }
}

如果您不使用 ES6，请查看 What is the most efficient way to deep clone an object in JavaScript? 了解如何克隆对象。

注意：如果对象包含对象（例如{a: {b: "h"}}，那么您将需要执行a deep clone（在对象中克隆对象）。

【讨论】：