白话vue深拷贝和浅拷贝

白话vue深拷贝和浅拷贝

简单的来说 深拷贝就是a=1 然后把a复制给b 然后修改b的值 a的值不变
（原理: 新创建一个同样值是1的变量a, 然后把这个新a 的内存空间地址指向给b, b的内存空间指向是新a 修改b的值 那么a的值自然不变 因为他们的内存空间指向不一样）
浅拷贝 就是b复制了a 当修改a的值 b的值也发上了变化
(原理: 把变量a复制给b 然后a和b 他们是公用同一个内存空间地址, 此时修改a变量的值 那么b 自然也会跟着改变 )

下面来个栗子吃

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)
    }

最后m输出 8 20 30 m和info绑定 修改this.info.attr1 m的值也发生了改变

以前在开发组件的时候 父组件给子组件传值 绑定数据源, 然后修改子组件的数据 父组件的数据也跟着改变 遇到这种情况 上代码

this.$refs.Tran.leftData=JSON.parse(JSON.stringify(this.listData)) 

可有效解决此种问题

JSON.parse 是从一个字符串中解析出json(键值对)
JSON.stringify 是从一个对象中解析出字符串
需注意: 他们在使用的时候 如果参数不对 就不能正确转换