vue陷阱-深拷贝vs浅拷贝

案例重现

看下面的一个例子

data(){
        return{
            info:{
                attr1:'test1',
                attr2:'test2'
            }
        }
    },
    created(){
        let m = {attr1:'10',attr2:'20',attr3:'30'}
        this.info = m
        this.info.attr1 = 8
        console.log(m)
    }

这是vue的部分代码,我们猜测m会输出什么,你会惊奇的发现m会和this.info绑定,也就是对this.info.attr1的修改,会导致m的值变化,控制台输出的结果是: {ob: Observer} attr1: 8 attr2: "20" attr3: "30"

深拷贝vs浅拷贝

深拷贝:B复制了A,当修改A时,B没有发生变话 浅拷贝:B复制了A,当修改A时,B跟着发生了变化。

那么为何会有深拷贝和浅拷贝的出现呢?原因就是为了节省内存空间,浅拷贝就是我们的两份数据指向了同一个内存地址,当一个变量修改了内存里面的值之后,另一个变量读取的时候就会发现这个变化,这就是浅拷贝,它大大节省了内存空间。

如果赋值的时候,不是简单的修改指针指向,而是重新创建一个内存区域,那么显然两个变量之间就没有任何关系了,这个时候就是深拷贝。

解决办法

如何将浅拷贝转换为深拷贝?简单的办法就是使用js的提供的JSON.parse(JSON.stringify()) ; 经过这样的赋值,就是深拷贝,不会修改原变量。

总结

其实这个深浅拷贝不是vue的问题,是js本身就存在的问题,只不过在vue中,我们习惯了数据绑定,导致这个问题被放大了。 所以平时对于数据对象的复制,还是需要考虑一下深浅拷贝的问题的。