VueJS:从方法更新数据会使属性同步

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 分开。因此，在该方法触发一次后，每次更新 a 时，它也会更新 b，这不应该发生。

下面的 JS Bin 显示了问题：

https://jsbin.com/kofobifego/1/edit?html,js,console,output

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。

有关该主题的更详细说明，请参阅本文。