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”]。我只想将“ x”添加到arrayCopy。我怎样才能做到这一点？为什么会这样？

Answer 1

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

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

Answer 2

您通过执行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 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);
    }
  }
});

Vue JS-将变量设置为vueObject.dataItem并对其进行修改也会修改Vue数据项

3 个答案: