当前位置: 首页 > news >正文

vue深拷贝:1、使用JSON.parse()和JSON.stringify();2、使用Lodash库;3、使用深拷贝函数(采用递归的方式)

文章目录

  • 引言
    • 三种方法的优缺点
    • 在Vue中,实现数组的深拷贝
  • I JSON.stringify和 JSON.parse的小技巧
    • 深拷贝步骤
    • 缺点:
    • 案例1:向后端请求路由数据
    • 案例2: 表单数据处理时复制用户输入的数据
  • II 使用Lodash库
    • 步骤
    • 适用于复杂数据结构和需要处理循环引用的场景
  • III 自定义的深拷贝函数(采用递归的方式)
    • 示例代码
    • 适用于需要特殊处理的场景

引言

深拷贝是指创建一个完全独立的副本,而不仅仅是引用原始数组的副本。
在Vue中,有几种方法可以实现对象的深拷贝:

  • 使用JSON.parse()和JSON.stringify()
  • 使用Lodash库
  • 使用深拷贝函数

三种方法的优缺点

方法优点缺点
JSON.parse()和JSON.stringify()简单易用,适合大多数情况无法拷贝函数、undefinedSymbol,不支持循环引用
Lodash库功能强大,处理复杂结构需要额外引入库
自定义深拷贝函数灵活性高,可定制编写和维护成本高,代码复杂
  • 对于简单的场景,使用 JSON.parse() 和 JSON.stringify() 是一种快速便捷的方法;
  • 对于复杂的场景,Lodash 库提供了强大的 cloneDeep 方法;
  • 自定义深拷贝函数则适用于需要

相关文章:

vue深拷贝:1、使用JSON.parse()和JSON.stringify();2、使用Lodash库;3、使用深拷贝函数(采用递归的方式)

文章目录 引言三种方法的优缺点在Vue中,实现数组的深拷贝I JSON.stringify和 JSON.parse的小技巧深拷贝步骤缺点:案例1:向后端请求路由数据案例2: 表单数据处理时复制用户输入的数据II 使用Lodash库步骤适用于复杂数据结构和需要处理循环引用的场景III 自定义的深拷贝函数(…...

ES 删除index 的curl

以下是使用 `curl` 命令删除 Elasticsearch 索引的格式和示例: ### 基本格式 ```bash curl -XDELETE "http://<node-ip|hostname>:9200/<index-name>" ``` - `<node-ip|hostname>`:Elasticsearch 节点的 IP 地址或主机名。 - `<index-name&g…...

游戏引擎学习第124天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾/复习 今天是继续完善和调试多线程的任务队列。之前的几天&#xff0c;我们已经介绍了多线程的一些基础知识&#xff0c;包括如何创建工作队列以及如何在线程中处理任务。今天&#xff0c;重点是解决那些我们之前没有注意到…...

第十四届蓝桥杯Scratch11月stema选拔赛真题——小猫照镜子

编程实现&#xff1a; 小猫照镜子。(背景非源素材) 具体要求&#xff1a; 1). 运行程序&#xff0c;角色、背景如图所示&#xff1b; 完整题目可点击下方链接查看&#xff0c;支持在线编程~ 小猫照镜子_scratch_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/s…...

使用vscode导出Markdown的PDF无法显示数学公式的问题

我的硬件环境是M2的MacBook air&#xff0c;在vscode中使用了Markdown PDF来导出md文件对应的PDF。但不管导出html还是PDF文件&#xff0c;数学公式都是显示的源代码。 我看了许多教程&#xff0c;给的是这个方法&#xff1a;在md文件对应的html文件中加上以下代码&#xff1a…...

前端系列之:Blob

Blob 与二进制 什么是二进制&#xff1f; 二进制是计算机数据的基本表示形式&#xff0c;只使用 0 和 1 两个数字来表示数值。任何类型的数据&#xff08;无论是文本、图片、音频文件等&#xff09;都可以通过二进制表示。 什么是 Blob&#xff1f; 全称 Binary Large Object&a…...

【项目管理】基于 C 语言的 QQ 聊天室实现(TCP + 多线程 + SQLite3)

基于 C 语言的 QQ 聊天室(TCP + 多线程 + SQLite3) 项目功能基础功能: 登录、注册、添加好友、私聊、创建群聊、群聊扩展功能: 删除好友、注销账号、好友在线状态、群管理(拉人/踢人)、VIP 特权、邮件通知等 功能介绍:模拟QQ聊天客户端:登录界面:1、登录2、注册 //将用…...

Apache Flink:实时数据流处理的终极武器

Apache Flink&#xff1a;实时数据流处理的终极武器 在当今这个数据驱动的世界&#xff0c;实时数据流处理已经成为各行各业的核心需求。从金融风控到电商推荐&#xff0c;从物联网监控到网络安全&#xff0c;毫秒级的响应能力决定了一家公司在市场中的竞争力。而在众多流式计…...

点云处理入门--PointNetPointNet++论文与代码详解

基础知识 点云数据&#xff1a; 点云是一种通过三维扫描设备或计算机图形学技术获取的三维空间数据&#xff0c;通常由一系列点组成&#xff0c;每个点包含其在三维空间中的坐标&#xff08;如 x,y,z&#xff09;&#xff0c;有时还可能包含颜色、强度等附加信息。 介绍几种常…...

通过Nginx负载均衡+Keepalived实现业务高可用

通过Nginx负载均衡和Keepalived可以实现业务的高可用&#xff0c;以下是详细的实现步骤&#xff1a; 环境准备 假设我们有3台服务器&#xff0c;IP地址分别为&#xff1a; 服务器1&#xff08;Nginx Keepalived 主节点&#xff09;&#xff1a;192.168.1.100服务器2&#x…...

Spark技术系列(三):Spark算子全解析——从基础使用到高阶优化

Spark技术系列(三):Spark算子全解析——从基础使用到高阶优化 1. 算子核心概念与分类体系 1.1 算子本质解析 延迟执行机制:转换算子构建DAG,行动算子触发Job执行任务并行度:由RDD分区数决定(可通过spark.default.parallelism全局配置)执行位置优化:基于数据本地性的…...

ES6模块化详解:导入与导出方式

在现代 JavaScript 开发中&#xff0c;模块化是代码管理和组织的重要工具。ES6&#xff08;ECMAScript 2015&#xff09;引入了模块化的概念&#xff0c;通过 import 和 export 来组织代码&#xff0c;使得模块的管理变得更加清晰和简洁。本文将详细介绍 ES6 中的各种模块导入导…...

每日学习Java之一万个为什么?[MySQL面试篇]

分析SQL语句执行流程中遇到的问题 前言1 MySQL是怎么在一台服务器上启动的2 MySQL主库和从库是同时启动保持Alive的吗&#xff1f;3 如果不是主从怎么在启动的时候保证数据一致性4 ACID原则在MySQL上的体现5 数据在MySQL是通过什么DTO实现的6 客户端怎么与MySQL Server建立连接…...

常用空间数据结构对比

空间数据结构是用来组织和查询多维空间数据的算法结构。它们在地理信息系统 (GIS)、计算机图形学、机器人导航、机器学习等领域非常重要。以下是几种常见空间数据结构的对比&#xff1a; 1. 四叉树&#xff08;Quadtree&#xff09; 适用场景&#xff1a;二维空间数据&#x…...

AnythingLLM+LM Studio本地知识库构建

前置操作&#xff1a; 已经安装以下软件&#xff0c;并配置后&#xff1a; DeepSeek-R1-Distill-Llama-8B-Q4_K_M.ggufLM-Studio-0.3.10-6-x64 软件准备&#xff1a; 下载AnythingLLM&#xff1a;AnythingLLM | The all-in-one AI application for everyone 点击"Dow…...

使用 Java 更新 Word 文档中的图表数据-超详细

使用 Java 更新 Word 文档中的图表数据 在日常的工作中&#xff0c;尤其是在数据分析和报告自动化的场景中&#xff0c;可能会遇到需要定期更新 Word 文档中的图表数据的需求。比如&#xff0c;生成数据报告时&#xff0c;我们需要在图表中更新一些动态的数据值。今天&#xf…...

Qt常用控件之下拉框QComboBox

下拉框QComboBox QComboBox 是一个下拉框控件。 1. QComboBox属性 属性说明currentText当前选中的文本。currentIndex当前选中的条目下标&#xff08;从 0 开始&#xff0c;如果没有条目被选中则该值为 -1&#xff09;。editable是否允许被修改。为 true 时&#xff0c;QCom…...

Qt 中集成mqtt协议

一&#xff0c;引入qmqtt 库 我是将整个头文件/源文件都添加到了工程中进行编译&#xff0c;这样 跨平台时 方便&#xff0c;直接编译就行了。 原始仓库路径&#xff1a;https://github.com/emqx/qmqtt/tree/master 二&#xff0c;使用 声明一个单例类&#xff0c;将订阅到…...

2024年第十五届蓝桥杯大赛软件赛省赛Python大学A组真题解析

文章目录 试题A: 拼正方形(本题总分:5 分)解析答案试题B: 召唤数学精灵(本题总分:5 分)解析答案试题C: 数字诗意解析答案试题A: 拼正方形(本题总分:5 分) 【问题描述】 小蓝正在玩拼图游戏,他有7385137888721 个2 2 的方块和10470245 个1 1 的方块,他需要从中挑出一些…...

AI大模型-提示工程学习笔记19-自我反思

目录 1. 自我反思的核心思想 (1) LLM 的局限性 (2) Reflexion 的解决方案 2. Reflexion 的工作流程 (1) 任务输入 (2) 初始生成 (3) 反思 (Reflection) (4) 调整与改进 (5) 迭代 (6) 结果输出 3. Reflexion 的关键组件 (1) 大语言模型 (LLM) (2) 反思者 (Reflector…...

无机布防火卷帘门价格怎么算?按尺寸定制,按需报价

无机布防火卷帘门作为建筑防火分区的核心设备&#xff0c;价格一直是工程采购的关注重点。很多用户在询价时&#xff0c;会发现不同厂家的报价差异较大&#xff0c;这是因为无机布防火卷帘门的价格并非按统一单价计算&#xff0c;而是完全根据项目的实际需求定制化核算。 &…...

别再乱用npm install了!手把手教你用npx only-allow为项目指定包管理器(支持pnpm/yarn/npm)

用only-allow统一团队包管理器&#xff1a;从配置到CI的全流程指南 你是否曾经在拉取一个新项目后&#xff0c;面对npm install、yarn还是pnpm i的抉择感到困惑&#xff1f;或者更糟的是&#xff0c;团队成员混用不同包管理器导致node_modules结构不一致&#xff0c;引发各种诡…...

对称与负电源测试:动态直流电子负载的设计、原理与应用

1. 项目概述&#xff1a;对称与负电源的静态与动态直流负载在电子实验室里&#xff0c;测试一个电源的性能&#xff0c;尤其是它的动态响应能力&#xff0c;是件既基础又关键的事。我们常说的“直流电子负载”就是这个领域的核心工具。我之前设计并分享过一个用于正电源测试的静…...

ThinkPad开机报错0183/0253?别慌,手把手教你搞定EFI变量错误(附BIOS重置教程)

ThinkPad开机报错0183/0253&#xff1f;EFI变量错误全面解决方案当你按下ThinkPad的电源键&#xff0c;期待熟悉的开机画面时&#xff0c;屏幕上却突然跳出一串神秘代码——"0183: Bad CRC of Security Settings in EFI Variable"或"0253: EFI Variable Block D…...

SAP-ABAP:变量、常量、结构与内表声明(10篇博客合集) 第五篇:声明时的键值设计技巧:结构与内表的主键、非主键配置指南

变量、常量、结构与内表声明&#xff08;10篇博客合集&#xff09; 第五篇&#xff1a;声明时的键值设计技巧&#xff1a;结构与内表的主键、非主键配置指南如果把内表比作一张内存中的“数据库表”&#xff0c;那么键就是这张表的索引甚至主键。键的设计直接决定了数据的唯一性…...

智慧树自动刷课助手:3步告别手动操作的学习效率工具

智慧树自动刷课助手&#xff1a;3步告别手动操作的学习效率工具 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台的重复刷课操作而烦恼吗&#xff1f;智…...

PDF 可视化签名盖章页技术解析

本文是我在设备检测系统项目开发中,无设备检测的技术实现备忘录,记载实现过程。 本文以 PC 端页面 sign-pdf.vue 为主线,说明「无设备报检」在报告审批环节如何通过前后端协作,完成报告/记录 PDF 上的签名、印章、报告编号拖放定位,并在审批通过后由后端合并生成带签章的正…...

WarcraftHelper:魔兽争霸III现代兼容性问题的终极解决方案指南

WarcraftHelper&#xff1a;魔兽争霸III现代兼容性问题的终极解决方案指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 魔兽争霸III作为经典即时战…...

2027考研全套资料免费分享

备战27考研最全备考资料整理完毕&#xff0c;一路走来深知备考搜集资料耗费大量时间&#xff0c;浪费不少精力。特意整理2027考研全科完整版资源&#xff0c;全部打包汇总&#xff0c;零基础考生直接拿来就能使用&#xff0c;省去四处搜集资料的烦恼。资料内含&#xff1a;&…...

交流电机驱动器的三种控制模式:前沿切相、后沿切相与同步模式详解

1. 项目概述&#xff1a;一个能玩出花的交流电机驱动器在汽车改装、工业控制或者一些创客项目里&#xff0c;驱动一个交流电机听起来简单&#xff0c;但想让它听话地变速、正反转&#xff0c;甚至实现软启动和精确同步&#xff0c;往往就得搬出笨重又昂贵的工业变频器。今天分享…...