vue深拷贝的3种实现方式小结
更新时间：2023年02月21日 11:10:23 作者：nav-item
当使用同一个对象产生冲突时，可以使用lodash包，对该对象进行深拷贝，从而使操作的对象为不同的对象,这篇文章主要给大家介绍了关于vue深拷贝的3种实现方式,需要的朋友可以参考下
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝。深拷贝：拷贝的是对象或者数组内部数据的实体，重新开辟了内存空间存储数据；浅拷贝：拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存；
1、通过递归方式实现深拷贝
比较全面的深拷贝，缺点是较为繁琐
function deepClone(obj) {
var target = {};
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
if (typeof obj[key] === 'object') {
target[key] = deepClone(obj[key]);
} else {
target[key] = obj[key];
}
}
}
return target;
}2、JSON.parse(JSON.stringify(obj))
满足一般使用场景，但无法实现对象中方法(fountion)的深拷贝
let obj = {
id: 1,
name: '张三',
age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))3、jQuery的extend方法实现深拷贝
var array = [1,2,3,4]; var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝
拓展阅读
vue深拷贝的其他实现方式
1、Object.assign(obj1, obj2)
只有一级属性为深拷贝，二级属性后就是浅拷贝
let obj = {
id: 1,
name: '张三',
age: 10,
}
let newObj = Object.assign({}, obj)2、扩展运算符
只有一级属性为深拷贝，二级属性后就是浅拷贝
var obj = {
a: 1,
b: 2
}
var obj1 = {…obj}3、数组使用数组方法进行深拷贝（concat、slice）
只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]
var arr1 = [1, 2, 3, 4] var arr2 = arr1.concat() var arr3 = arr1.slice(1)
总结
到此这篇关于vue深拷贝的3种实现方式的文章就介绍到这了,更多相关vue深拷贝实现方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
VUE使用vue-tree-color组件实现组织架构图并可以动态更新数据的效果
本文主要介绍了如何在Vue中使用vue-tree-color组件实现组织架构图,并详细介绍了如何实现数据的动态加载,在动态加载数据时,要确保数据更新是在Vue的响应式系统能捕获到的情况下进行的2024-10-10
这篇文章主要介绍了vue拦截器组件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
今天小编就为大家分享一篇axios向后台传递数组作为参数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
在Vue 3中,可以通过创建一个事件总线（event bus）来实现组件之间的通信,要在Vue 3中使用事件总线,主要步骤有：1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线,以下是详细的步骤和示例,需要的朋友可以参考下2025-01-01
使用 Vue router 创建 SPA(Single Page App),往往有这种需求：首页是列表页,点击列表项进入详情页,在详情页点击返回首页后,希望看到的是,首页不刷新,并且滚动条停留在之前的位置,这篇文章主要介绍了Vue Router 返回后记住滚动条位置的实现方法,需要的朋友可以参考下2023-09-09
文章介绍了一个Vue组件,该组件允许用户通过鼠标右键在画布上绘制矩形,并且支持通过Ctrl键进行多选,文章附带了组件代码和一个示例,建议读者将代码复制到自己的开发环境中进行调试2024-12-12
这篇文章主要介绍了vue组件和iframe页面的相互传参问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本篇文章主要介绍了手把手教你vue-cli单页到多页应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论