将数据分配给变量时,为什么计算出的更改数据?

时间:2018-12-25 19:28:59

标签: vue.js computed-properties

使用计算属性时,我刚刚意识到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>

2 个答案:

答案 0 :(得分:1)

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

let some = this.items.slice()

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

答案 1 :(得分:0)

您应使用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>