免费资源部落

这篇文章主要讲解了“vue深拷贝的实现方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue深拷贝的实现方法有哪些”吧！

vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝。深拷贝：拷贝的是对象或者数组内部数据的实体，重新开辟了内存空间存储数据；浅拷贝：拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存。

1、通过递归方式实现深拷贝

比较全面的深拷贝，缺点是较为繁琐

functiondeepClone(obj){vartarget={};for(varkeyinobj){if(Object.prototype.hasOwnProperty.call(obj,key)){if(typeofobj[key]==='object'){target[key]=deepClone(obj[key]);}else{target[key]=obj[key];}}}returntarget;}2、JSON.parse(JSON.stringify(obj))

满足一般使用场景，但无法实现对象中方法(fountion)的深拷贝

letobj={id:1,name:'张三',age:10,}letnewObj=JSON.parse(JSON.stringify(obj))3、jQuery的extend方法实现深拷贝vararray=[1,2,3,4];varnewArray=$.extend(true,[],array);//true为深拷贝，false为浅拷贝拓展阅读vue深拷贝的其他实现方式

1、Object.assign(obj1, obj2)

只有一级属性为深拷贝，二级属性后就是浅拷贝

letobj={id:1,name:'张三',age:10,}letnewObj=Object.assign({},obj)

2、扩展运算符

只有一级属性为深拷贝，二级属性后就是浅拷贝

varobj={a:1,b:2}varobj1={…obj}

3、数组使用数组方法进行深拷贝（concat、slice）

只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]

vararr1=[1,2,3,4]vararr2=arr1.concat()vararr3=arr1.slice(1)

感谢各位的阅读，以上就是“vue深拷贝的实现方法有哪些”的内容了，经过本文的学习后，相信大家对vue深拷贝的实现方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！