案例重现

看下面的一个例子

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中，我们习惯了数据绑定，导致这个问题被放大了。
所以平时对于数据对象的复制，还是需要考虑一下深浅拷贝的问题的。