<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中的解构赋值，你可以参考一下文档。
举个栗子：