为什么在将数据分配给变量时计算会更改数据？答案

【问题标题】：Why does computed change data when assigning data to a variable?为什么在将数据分配给变量时计算会更改数据？
【发布时间】：2019-05-24 07:20:33
【问题描述】：

我刚刚意识到 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>

【问题讨论】：

计算中的副作用是一种不好的做法。
使用this.items.slice()时没有副作用真的很好奇为什么我的问题被否决了...
我没有投票，我只是评论了。

标签： vue.js computed-properties

【解决方案1】：

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

let some = this.items.slice()

这样您将获得一个全新的对象，而不仅仅是一个新的“参考”。
Normaly JS 是“按值调用”，但对于对象和数组，值是引用。
编辑：
看一下： Javascript passing arrays to functions by value, leaving original array unaltered

【讨论】：

【解决方案2】：

您应该使用this.items.slice(0) 复制此内容

new Vue({
  el: "#app",
  data: {
    items: ['foo', 'bar']
  },
  computed: {
    someComputed() {
      let some = this.items.slice(0)
      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>

【讨论】：