Блог

Я использую VueJS. Есть очень простой случай. В качестве данных у меня есть следующее:

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

Я беру пользовательский ввод и прикрепляю его к ‘a’, используя v-model.

 <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, консоль, вывод

Это потому, что объекты являются ссылочными типами в 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.

Пожалуйста, обратитесь к этой статье для более подробного объяснения темы.