当前位置: 首页 > 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…...

Nunchaku FLUX.1-dev 操作系统兼容性指南:Windows系统部署要点

Nunchaku FLUX.1-dev 操作系统兼容性指南&#xff1a;Windows系统部署要点 如果你是一名Windows开发者&#xff0c;想在自己的电脑上跑起来Nunchaku FLUX.1-dev&#xff0c;那你来对地方了。我知道&#xff0c;很多AI模型和工具的教程&#xff0c;默认都是给Linux或者macOS用户…...

拉曼激光雷达 L0 级数据 Python处理和可视化实现,结果分析

4 个通道产品逐图分析 左上&#xff1a;532P 通道&#xff08;532 nm 平行偏振通道&#xff09; 产品类型 &#xff1a;532 nm 弹性散射平行偏振原始信号&#xff08;L0 级&#xff09; 物理含义 &#xff1a;接收 532 nm 激光与大气分子、气溶胶、云粒子发生弹性散射后&#…...

GetQzonehistory终极指南:5分钟永久备份你的QQ空间记忆

GetQzonehistory终极指南&#xff1a;5分钟永久备份你的QQ空间记忆 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在这个数字记忆易逝的时代&#xff0c;QQ空间承载了我们太多的青春回…...

GLM-4V-9B保姆级安装教程:Docker一键部署,支持多轮对话

GLM-4V-9B保姆级安装教程&#xff1a;Docker一键部署&#xff0c;支持多轮对话 1. 环境准备与快速部署 1.1 系统要求 操作系统&#xff1a;Linux (推荐Ubuntu 20.04)显卡&#xff1a;NVIDIA GPU (显存≥24GB)驱动&#xff1a;NVIDIA驱动≥515.65.01Docker&#xff1a;19.03C…...

LangChain 源码剖析-消息类详解(Messages)

LangChain 源码剖析-消息类详解(Messages) 消息是包含以下内容的对象: 角色(Role)-标识消息类型(例如系统、用户) 内容(Content)-表示消息的实际内容(如文本、图像、音频、文档等) 元数据(Metadata)-可选字段,如响应信息、消息ID和令牌使用情况 LangChain提供了一种标…...

50款创意HTML5错误页模板集锦(403/404/500全适配)

1. 为什么你需要这些HTML5错误页模板&#xff1f; 做网站的朋友都知道&#xff0c;遇到403、404、500这些错误状态码是家常便饭。但很多开发者往往把精力都放在主页面设计上&#xff0c;忽略了错误页面的用户体验。我见过太多网站的错误页面就是一行冷冰冰的文字提示&#xff…...

Meta推出Muse Spark,AI领域再掀波澜

Meta告别旧模型&#xff0c;Muse Spark闪亮登场周三&#xff0c;Meta宣布推出Muse系列的首个AI模型——Muse Spark&#xff0c;这标志着Meta彻底告别了之前在开源Llama模型系列上的工作。Llama系列模型在用户和独立大语言模型&#xff08;LLM&#xff09;排名中反响平平&#x…...

春联生成模型在软件测试中的应用:自动化生成测试文本数据

春联生成模型在软件测试中的应用&#xff1a;自动化生成测试文本数据 最近和几个做软件测试的朋友聊天&#xff0c;他们都在为一个问题头疼&#xff1a;测试中文相关的软件时&#xff0c;怎么才能搞到足够多、足够“怪”的文本数据&#xff1f;比如测试输入法会不会因为某些生…...

VideoAgentTrek Screen Filter部署排错大全:从403 Forbidden到GPU内存不足

VideoAgentTrek Screen Filter部署排错大全&#xff1a;从403 Forbidden到GPU内存不足 部署AI视频处理工具&#xff0c;最怕的就是遇到各种报错&#xff0c;尤其是当你满怀期待地敲下运行命令&#xff0c;屏幕上却弹出一堆看不懂的红色错误信息时&#xff0c;那种感觉真是让人…...

Mbed平台任意引脚软件PWM库实现与应用

1. 项目概述lib_PwmOutAllPin是一个面向 ARM Mbed OS 平台的轻量级扩展库&#xff0c;其核心目标是突破 Mbed 原生PwmOut类的硬件引脚限制&#xff0c;实现“任意数字引脚输出 PWM 波形”的能力。在标准 Mbed SDK 中&#xff0c;PwmOut构造函数仅接受预定义的、具备硬件 PWM 功…...