<p id="app">
<h1>
{{ count.id }}
</h1>
<h2>
{{ item[0].id }}
</h2>
</p>
<script>
let vm = new Vue({
el: '#app',
data () {
return {
item: [
{
id: 60
}
],
count: {}
}
},
mounted () {
this.count = this.item[0]; // 赋值给count
}
});
</script>
在控制台裡列印: vm.count.id--
會發現 items.id 也跟著改了。我明明只改 count.id
如何避免同步?我只想更改 count.id;
淺拷貝和深拷貝的問題。
這還是JS資料型別的基礎問題。
從你提供的程式碼判斷item是個數組, 把一個數組賦值給另外一個變量,只是賦值了引用, 兩個都是引用了一個數組, 當然更改這個數組,所有引用這個數組的都會發生變化。
解決方案一:
數組是索引結構,也就是說相當於兩個指標指向同一個地方,所以說你改變其中一個,另一個也會跟著改變。至於如何避免,我建議用ES6中的解構賦值,可以參考一下文件。
舉個栗子: