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

此行为导致我的项目中出现问题。这是正在发生的事情的简化版本。我想了解为什么会发生这种情况，以及如何避免这种情况发生。
我在网站的头部加载了vue：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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。
我怎样才能做到这一点？为什么会这样？

最佳答案

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