vue深拷贝的三种实现方式

这篇具有很好参考价值的文章主要介绍了vue深拷贝的三种实现方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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]]文章来源地址https://www.toymoban.com/news/detail-822907.html

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
var arr3 = arr1.slice(1)

到了这里,关于vue深拷贝的三种实现方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 01_前端css编写的三种方式

    前言 CSS的引入方式共有三种:行内样式、内部样式表、外部样式表 用法: 在元素上直接通过style属性进行设置css样式设置 示例: 实际在写页面时不提倡使用,在测试的时候可以使用。 例如: 用法: 在style标签中书写CSS代码。style标签写在head标签中 例如: 用法: CSS代码保

    2024年02月09日
    浏览(41)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(47)
  • 十分钟掌握前端获取实时数据的三种主流方式

    前端获取实时数据的三种主流方式 本文聊聊前端获取实时数据的三种主要方式。想象一下,我们在网上购物时,经常能看到最新的优惠信息弹出,或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那么,这背后到底使用

    2024年02月21日
    浏览(48)
  • Vue定义全局组件的三种方式

    第一种方式 1.1使用 Vue.extend 来创建全局的Vue组件 1.2使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象) Vue.component 第一个参数:组件的名称,引用组件的时候,就是一个HTML 标签形式来引入的 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容 1

    2024年02月07日
    浏览(50)
  • vue路由传参的三种方式

    目录 1.动态路由传参 2.params传参 3.query传参         使用“路径参数”使用冒号  :  标记。当匹配到一个路由时,参数值会被设置到  this.$route.params ,也可以使用props来接收   params  传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过

    2024年02月11日
    浏览(39)
  • Vue中刷新页面的三种方式

    一、通过js原始方法刷新 缺点: 出现闪白 二、通过Vue自带的路由进行跳转 缺点: 出现闪白 三、通过在APP页面进行demo进行刷新(推荐) 优点: 不闪白 vue2写法 (1)、在APP页面中写入下面代码 (2)、在需要刷新的页面进行引入并使用 2. vue3.2写法 (1)、在APP页面中写入下面代

    2024年02月16日
    浏览(41)
  • vue项目打断点的三种方式

    方式一:使用debugger 介绍:js自带的方法 优点:简单好用,不需要额外的配置 注意:生产环境下需要去掉 方式二:使用vsCode插件断点 介绍:vscode集成的断点调试,大佬必备 优点:减少浏览器和编辑器之间的频繁切换 提高开发效率 步骤: 安装插件 Debugger for Chrome(已废弃)

    2024年01月24日
    浏览(65)
  • JavaScript深拷贝(js深拷贝,JavaScript递归函数,实现深拷贝)

    简述:JavaScript的深拷贝和浅拷贝大家都比较熟悉,今天来分享下深拷贝,就是使用该函数时,会复制拷贝一份该数据,修改该数据属性,不会改变原有数据,就是把复制的对象所引用的对象全都复制了一遍,具体实现如下; 1、定义拷贝对象; 2、定义递归函数deepClone(),实现

    2024年02月15日
    浏览(62)
  • (详解)vue中实现主题切换的三种方式

    目录 一、背景 二、实现思路  方法1:定义全局的CSS变量  方法2:切换已定义好的css文件  方法3:切换顶级CSS类名 (需使用css处理器,如sass、less等) 在我们开发中我们会遇到像是需要切换程序风格、 主题切换 啦这种应用场景。 参考大佬博客!!! vue中实现 ‘换肤 / 切换样

    2024年02月08日
    浏览(40)
  • 【Vue3】pinia管理数据的三种方式

    💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互

    2024年04月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包