前端 mvc 框架 Vue.js 堆栈内存深度 copy

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 了对象