Vue JS - 将变量设置为 vueObject.dataItem 并修改它也会修改 Vue 数据项答案

【问题标题】：Vue JS - Setting variable to vueObject.dataItem and modifying it also modifies the Vue data itemVue JS - 将变量设置为 vueObject.dataItem 并修改它也会修改 Vue 数据项
【发布时间】：2019-07-08 21:31:35
【问题描述】：

这种行为导致我的项目出现问题。这是正在发生的事情的简化版本。我想了解为什么会发生这种情况，以及如何避免这种情况。我已经在我的网站头部加载了 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”]。我只想将“x”添加到 arrayCopy。我怎样才能做到这一点？为什么会这样？

【问题讨论】：

好吧，老套路是let copy = JSON.parse(JSON.stringify(vueObject.array))
你为什么要把这个逻辑放在 vue 实例之外
stackoverflow.com/questions/48363604/…
@BoussadjraBrahim 这不是我的实际项目。这是一个简化的例子。

标签： javascript vue.js vuejs2

【解决方案1】：

您通过执行 var arrayCopy = vueObject.array; 而不是将其复制到 arrayCopy 来引用 vueObject.array，因此要避免使用 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>

【讨论】：

非常感谢。我已经使用 JS 一段时间了，但我从未注意到这一点。你每天都会学到新东西:)

【解决方案2】：

对象是assigned by reference。当你分配一个数组时，你只是让另一个变量引用同一个对象。修改对象的内容将反映在引用该对象的所有内容中。

array copy 将是 arrayCopy = vueObject.array.slice()，但同样的警告适用于数组中包含的任何对象：如果您修改它们的内容，这些修改将显示在两个数组中。在链接线程中查看有关深度复制的更多答案。

【讨论】：

【解决方案3】：

另一种选择是创建一个新数组并将 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);
    }
  }
});

【讨论】：