Vue进阶(幺叁幺):父子组件传值实现数据深拷贝_vue3拷贝父组件传来的值

二、问题分析

当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下

数组:

var a = [1,2,3];  
var b = a; 
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

对象:

 var obj = {a:10}; 
 var obj2 = obj; 
 obj2.a = 20; // obj2.a改变了
 alert(obj.a); // 20,obj的a跟着改变

这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改obj时会导致obj2也被修改。

所以,在vue中,如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动。有这种双向绑定需求的话,那么自然是最好的,但如果不需要这种绑定而希望各组件的对象数据之间相互独立,可以用下面的方法解决:

computed: {        
  data: function () {           
      var obj={};            
      obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象 
      return obj       
  }
}

三、学海无涯

谈到深拷贝浅拷贝,就不得不谈到栈、堆、基本数据类型与引用数据类型了,因为这些概念能更好的让你理解。

基本数据类型包含:number,string,boolean,null,undefined五类。

引用数据类型(Object类)包含常规名值对的无序对象{a:1},数组[1,2,3],以及函数等。

而这两类数据存储分别是这样的:

3.1 基本类型

名值存储在栈内存中,例如let a=1;
在这里插入图片描述
当你b=a复制时,栈内存会新开辟一个内存,例如这样:
在这里插入图片描述

所以当你此时修改a=2,对b并不会造成影响,因为此时的b已自食其力,翅膀硬了,不受a的影响了。当然,let a=1,b=a;虽然b不受a影响,但这也算不上深拷贝,因为深拷贝本身只针对较为复杂的object类型数据。

3.2 引用数据类型

名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,我们以上面浅拷贝的例子画个图:

在这里插入图片描述

b=a进行拷贝时,其实复制的是a的引用地址,而并非堆里面的值。

在这里插入图片描述

而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。

在这里插入图片描述

若在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果。

在这里插入图片描述

四、深拷贝

4.1 递归

可以递归去复制所有层级属性。

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

再来看下数组操作方法slice()concat()的应用。

let a=[1,2,3,4],
    b=a.slice();
a[0]=2;
console.log(a,b);

在这里插入图片描述
从上面控制台的输出结果可知,那是不是说slice方法也是深拷贝了,毕竟b也没受a的影响,上面说了,深拷贝是会拷贝所有层级的属性,在这个例子基础上,我们再把a改下:

let a=[0,1,[2,3],4],
    b=a.slice();
a[0]=1;
a[2][0]=1;
console.log(a,b);

在这里插入图片描述
由结果可知,数组拷贝不彻底,b对象的一级属性确实不受影响了,但是二级属性还是没能拷贝成功,仍然脱离不了a的控制,说明slice根本不是真正的深拷贝。

第一层的属性确实深拷贝,拥有了独立的内存,但更深的属性却仍然共用了地址,所以才会造成上面的问题。

同理,concat也存在这样的情况,他们都不是真正的深拷贝,这里需要注意。

4.2 parse 和 stringify

除了递归,我们还可以借用上面所述JSON对象提供的parsestringify方法。

function deepClone(obj){
    return JSON.parse(JSON.stringify(obj))
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

在这里插入图片描述
可以看到,这下b是完全不受a的影响了。

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

  • 9
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值