Question

我正在使用VueJS。有一个非常简单的案例。我有以下数据：

  data: {
    a: {"name":null},
    b: {"name":null}
  }

我正在接受用户输入，并使用v模型将其附加到'a'。

<input type="text" v-model="a.name">

然后我有一个方法，当触发该方法时，应将值从a复制到b。

save() {
  this.b=this.a
}

这在第一次运行时效果很好，但是一旦我触发了该方法，a和b就会永久同步。为什么会发生这种情况，以及如何将a和b分开，除非触发了save方法。因此，一旦触发该方法，那么每次更新a时，它也会同时更新b，这是不应该发生的。

下面的JS Bin显示了问题：

Answer 1

这是因为对象是JS中的引用类型。请尝试以下代码。

save() {
  this.b.name = this.a.name
}

简体说明：在JavaScript中创建对象时，内存中将为该对象保留一个空间。您为变量分配的是对该对象的引用-将其视为指向内存中对象所在位置的路径/链接。因此，下面的代码...

this.b = this.a

...引用 this.a 保留的引用，并将其副本分配给 this.b 。现在 this.a 和 this.b 都分配了一个引用，但是它导致内存中的对象相同。这就是为什么修改 this.a 也会“修改” this.b 。

有关该主题的详细说明，请参阅this article。