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

Answer 1

您通过执行 var arrayCopy = vueObject.array; 来引用 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>