javascript - VueJS : Updating data from method makes the properties synced

Question

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

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

我正在获取用户输入并使用 v-model 将其附加到“a”。

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

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

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

第一次工作正常，但是一旦我触发了该方法，a 和 b 就会永久同步。为什么会发生这种情况，除非触发 save 方法，否则如何将 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。

请引用this article有关该主题的更详细解释。