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

Question

我在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却没有变化。

Answer 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（在对象内克隆对象）。