Vue JS - установка переменной в vueObject.dataItem и ее изменение также изменяет элемент данных Vue

Question

Такое поведение вызывает проблемы в моих проектах.Это упрощенная версия того, что происходит.Я хотел бы узнать, почему это происходит, и как я могу избежать этого.Я загрузил vue в заголовок моего сайта:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

И это объект Vue:

vueObject = new Vue({
el: '#app',
data: {
"array": []
}
});

Теперь моя проблема заключается в следующем.Как сохранить копию элемента данных «массива» из объекта Vue, чтобы я мог манипулировать им без фактического изменения реального элемента данных массива Vue?Это то, что я пытаюсь сделать, но это не работает так, как задумано;

var arrayCopy = vueObject.array;
arrayCopy.push("x");

Это приводит к тому, что для arrayCopy и vueObject.array должно быть установлено значение [«x»].Я только хочу добавить «х» в arrayCopy.Как я могу это сделать?Почему это происходит?

Answer 1

Вы ссылаетесь на vueObject.array, делая var arrayCopy = vueObject.array;, не копируя его в arrayCopy, поэтому, чтобы избежать этого, используйте let arrayCopy = vueObject.array.slice(); или Object.assign(arrayCopy, vueObject.array)

let vueObject = new Vue({
  el: '#app',
  data: {
    array: ['a', 'b']
  }
});

let arrayCopy = vueObject.array.slice();
arrayCopy.push('x');

console.log(arrayCopy);
console.log( vueObject.array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"></script>
<div id="app"></div>

Answer 2

Другой вариант - создать новый массив и распределить массив данных vue внутри нового массива, чтобы мы скопировали все его исходные значения, а затем управляли им как собственным контекстом.

new Vue({
  el: "#app",
  data: {
    array: [1, 2, 3]
  },
  created: function() {
    this.doSomething();
  },
  methods: {
    doSomething() {
      const copy = [...this.array];
      copy.push(4);
      console.log("copy:", copy);
      console.log("origninal", this.array);
    }
  }
});

Answer 3

Объекты назначены ссылкой .Когда вы присваиваете массив, вы просто заставляете другую переменную ссылаться на тот же объект.Изменение содержимого объекта будет отражено во всем, что ссылается на этот объект.

копия массива будет arrayCopy = vueObject.array.slice(), но то же самое предостережение применимо к любомуОбъекты, содержащиеся в массиве: если вы измените их содержимое, эти изменения будут отображаться в обоих массивах.См. Больше ответов в связанной ветке о глубоком копировании.