Vue.js
是当下前端最主流的框架之一,强大的 mvc
模式,让我们可以放弃传统式通过 JS
去操作 DOM
,我们只需要关注数据层就可以了,只要数据更新,我们的 view
层就会自动更新渲染。
可是这样的模式,在一些特殊场景下却并不是特别好用,当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将栈内存地址指向同一个,而不是真正意义上的拷贝),如下
let a = ['1','2'];
export default {
data(){
return{
a:a,
b:[]
}
},
created(){
this.b = this.a
this.b.push('3')
console.log(a) //[ "1", "2", "3" ]
}
}
正确的 copy
通过 JSON.parse()
方法和 JSON.stringify()
嵌套 copy
:
let a = ['1','2'];
export default {
data(){
return{
a:JSON.parse(JSON.stringify(a)),
b:[]
}
},
created(){
this.b = JSON.parse(JSON.stringify(a))
this.b.push('3')
console.log(a) //[ "1", "2" ]
console.log(this.a) //[ "1", "2" ]
console.log(this.b) //[ "1", "2", "3"]
}
}
这样就保证了原有的值不变,从而深度 copy 了对象