时间戳

首页 > 解决方案 > 为什么在将数据分配给变量时计算会更改数据？

vue.js - 为什么在将数据分配给变量时计算会更改数据？

问题描述

在使用计算属性时，我刚刚意识到 Vue.js 的一个奇怪行为。也许我错过了一些东西，这是正确的行为，但对我来说这没有意义。如果您查看以下代码，您将在计算属性中看到我创建了一个新变量并分配了一个在“数据”中定义的数组。然后我将一些新数据推送到新创建的变量中。现在“数据”中的数组也发生了变化！这是为什么？

new Vue({
  el: "#app",
  data: {
    items: ['foo', 'bar']
  },
  computed: {
    someComputed() {
      let some = this.items
      some.push('foobar')
      return some
    }
  }
})
<div id="app">
  {{ someComputed }} – {{ items }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

标签： vue.jscomputed-properties

解决方案

这是因为“引用调用”，您只是从数据中引用数组。它就像一个指针，some并且this.items指向同一个对象。
如果你想要一份this.items你需要打电话的副本。

let some = this.items.slice()

这样，您将获得一个全新的对象，而不仅仅是一个新的“参考”。
Normaly JS 是“按值调用”，但对于对象和数组，值是引用。
编辑：
看看： Javascript按值传递数组到函数，保持原始数组不变

推荐阅读