为什么在将数据分配给变量时计算会更改数据?
Why does computed change data when assigning data to a variable?
我刚刚发现 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>
这是因为"Call by Reference",您只是从数据中引用数组。就像一个指针,some
和this.items
指向同一个对象。
如果你想要一份this.items
的副本,你需要打电话。
let some = this.items.slice()
这样您将获得一个全新的对象,而不仅仅是一个新的 "reference"。
一般 JS 是 "Call by Value" 但对于对象和数组,该值是引用。
编辑:
看一下:
Javascript passing arrays to functions by value, leaving original array unaltered
你应该用 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>
我刚刚发现 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>
这是因为"Call by Reference",您只是从数据中引用数组。就像一个指针,some
和this.items
指向同一个对象。
如果你想要一份this.items
的副本,你需要打电话。
let some = this.items.slice()
这样您将获得一个全新的对象,而不仅仅是一个新的 "reference"。
一般 JS 是 "Call by Value" 但对于对象和数组,该值是引用。
编辑:
看一下:
Javascript passing arrays to functions by value, leaving original array unaltered
你应该用 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>