Vue3 完美实现深拷贝

文章目录

  • 一、问题背景
  • 二、安装lodash
  • 三、Vue3实现完美深拷贝
  • 四、非外部库非完美的实现深拷贝


一、问题背景

在复制表单之后,对表单进行修改,发现所有表单的值都同时改变,分析:表单没有进行深拷贝,而是引用的其它表单的值。

在这篇文章记录了 Vue2 实现深拷贝:Vue 双重v-for渲染表单,再复制表单编辑之深拷贝

在 Vue3 中,仍然可以和 Vue2 使用 require('lodash').cloneDeep 类似的方式来进行深拷贝。Vue3 的模块系统和 Vue2 相比没有根本性的变化,它依然支持CommonJS的require语法(尽管在使用如Vite这样的现代前端工具时,ES模块导入import是更推荐的方式)。

二、安装lodash

如果你还没有安装 lodash ,可以通过 npm 或 yarn 来安装:

npm install lodash
# 或者
yarn add lodash

三、Vue3实现完美深拷贝

使用 import 代替 require,你可以这样使用 lodashcloneDeep 函数:

import cloneDeep from 'lodash/cloneDeep';const obj = { a: 1, b: { c: 2 } };
const newObj = cloneDeep(obj);

这种方式更加现代,也是目前大多数JavaScript项目推荐的做法。

四、非外部库非完美的实现深拷贝

虽然 lodashcloneDeep 是一个非常强大且通用的深拷贝函数,但在某些情况下,你可能不需要引入外部库来实现深拷贝。例如,如果你要拷贝的对象只包含JSON兼容的数据类型(即没有函数、正则表达式对象、日期对象等),你可以使用原生的JSON方法来实现深拷贝:

const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));

请注意,这种方法有其局限性,它不能正确处理非JSON兼容的数据类型,如上所述。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/48444.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式人工智能(10-基于树莓派4B的DS1302实时时钟RTC)

1、实时时钟(Real Time Clock) RTC,全称为实时时钟(Real Time Clock),是一种能够提供实时时间信息的电子设备。RTC通常包括一个计时器和一个能够记录日期和时间的电池。它可以独立于主控芯片工作&#xff…

[AT_past202107_c] 入力チェック 题解

题目传送门 \color{orangered}\text{题目传送门} 题目传送门 题意很清楚,我们直接讲做法。 为了更好的进行判断,我们将 s , l , r s,l,r s,l,r 均定义为 string 类型的。 判断: 如果 s s s 的第一位是 0 且 s s s 的长度大于 1 1 1 &a…

Java----简单的洗牌算法

1.创建单张牌 一张牌需要有花色和数字,并且我们需要将一张牌的信息显示出来 public class Card {public String rank;//数字public String suit;//花色public String toString(){//显示花色的方法return String.format("[%s %s]",suit,rank);} }定义一个…

LeetCode 71, 86, 117

文章目录 71. 简化路径题目链接标签思路代码 86. 分隔链表题目链接标签思路分隔链表构建多个链表合并链表 代码 117. 填充每个节点的下一个右侧节点指针 II题目链接标签法一:层序遍历思路代码 法二:链表思路代码 71. 简化路径 题目链接 71. 简化路径 …

写一个简单的兼容GET/POST请求的登录接口

本文目录 安装JDK17安装或者更新Intelij Idea 2024SpringBoot生成项目压缩包下载maven,idea添加maven写POST接口浏览器访问GET接口PostMan安装及访问POST接口 安装JDK17 参考:https://blog.csdn.net/tiehou/article/details/129575138 安装或者更新Int…

类与对象-多态-案例3-电脑组装具体实现

#include<iostream> #include<string> using namespace std; //CPU class CPU { public:virtual void calculate() 0; }; //显卡 class GraCard { public:virtual void graphics() 0; }; //存储 class Memory { public:virtual void memory() 0; }; class Compu…

【CSS】基本用法

一、CSS简介 层叠样式表&#xff08;CSS&#xff09;是一种用来表现HTML或XML文档样式的计算机语言&#xff0c;可以对网页中元素位置进行像素级精确控制。CSS的中文名称为层叠样式表&#xff0c;外文全称为Cascading Style Sheets&#xff0c;是计算机科学领域的一种技术。CS…

大学生跨保计算机--学习规划分享

写在前面 目标 绩点达到前三&#xff0c;修计算机双学位丰富简历&#xff0c;积极参与科研竞赛&#xff0c;提前为保研铺路 暑假 一个月时间&#xff0c;自学Python语言的基础语法&#xff0c;去B站找视频&#xff0c;为以后参加比赛打下一定的基础 开学后可能没有太多时间…

C语言函数:编程世界的魔法钥匙(2)-学习笔记

引言 注&#xff1a;由于这部分内容比较抽象&#xff0c;而小编我又是一个刚刚进入编程世界的计算机小白&#xff0c;所以我的介绍可能会有点让人啼笑皆非。希望大家多多包涵&#xff01;万分感谢&#xff01;待到小编我学有所成&#xff0c;一定会把这块知识点重新介绍一遍&a…

[Day 32] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

AI中的神經網絡技術 神經網絡&#xff08;Neural Networks&#xff09;是人工智能&#xff08;AI&#xff09;領域的一個重要分支&#xff0c;靈感來自於生物神經系統。本文將深入探討神經網絡的基本概念、結構、工作原理及其在AI中的應用&#xff0c;並通過Python代碼詳細解釋…

HarmonyOS Web组件(二)

1. HarmonyOS Web组件 官方文档 1.1. 混合开发的背景和好处 混合开发&#xff08;Hybrid Development&#xff09;是一种结合原生应用和Web应用的开发模式&#xff0c;旨在同时利用两者的优势。随着移动应用需求的多样化和复杂化&#xff0c;单一的开发方式往往难以满足所有…

sass版本更新,不推荐使用嵌套规则后的声明

目前在 Sass 中不推荐使用嵌套规则后的声明&#xff0c;在 为了通知用户即将进行的更改&#xff0c;并给他们时间进行更改 与之兼容的样式表。在未来的版本中&#xff0c;Dart Sass 将更改为 匹配纯 CSS 嵌套生成的顺序。Deprecation Warning: Sasss behavior for declarations…

对androidTestDebug 产物进行重新签名

在 Gradle 中&#xff0c;你可以通过以下步骤对子模块中的 androidTestDebug 产物进行重新签名操作&#xff1a; 1. 创建一个自定义的 Sign 任务 在主项目的 build.gradle 文件中&#xff0c;创建一个自定义任务来执行重新签名操作&#xff1a; task reSignAndroidTestDebug…

Pytorch学习笔记【B站:小土堆】

文章目录 1 基础环境配置&#xff08;CPU版&#xff09;2 PyTorch学习2.1 Dataset和DataLoader2.1.1 Dataset2.1.2 DataLoader 2.2 Tensorboardadd_scalaradd_imageadd_graph 2.3 Transforms2.3.1 ToTensor2.3.2 Normalize2.3.3 Resize2.3.4 Compose 2.4 torchvision中的数据集…

pnpm build打包时占内溢出

这两天在打包H5网页的时候失败&#xff0c;总是提示下方错误 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 严重错误&#xff1a;堆限制附近标记压缩无效分配失败 - JavaScript 堆内存不足 尝试了多种方法&…

Linux源码安装的Redis如何配置systemd管理并设置开机启动

文章目录 实验前提实验 实验前提 已完成源码安装并能正常启动redis /usr/local/bin/redis-server能正常启动redis 实验 vim /etc/systemd/system/redis.service内容如下&#xff1a; [unit] Descriptionredis-server Afternetwork.target[Service] Typeforking ExecStart/…

【Blockly图形化积木编程二次开发学习笔记】5.自动保存与恢复

文章目录 引用使用 引用 <script src"./blockly/appengine/storage.js"></script>使用 <script>window.setTimeout(BlocklyStorage.restoreBlocks, 0); // 从本地存储中恢复块BlocklyStorage.backupOnUnload(); // 用户离开页面时自动将块备份到…

基于radix4的booth乘法器设计

下述乘法器是基于radix 4的booth乘法器&#xff0c;常用于集成电路IC的乘法器设计。 支持位宽可设置支持signsign、signunsign、unsignsign、unsignunsign; // FHDR------------------------------------------------------------ …

降雨量预测 | Matlab基于ARIMA-RBF降雨量预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 降雨量预测 | Matlab基于ARIMA-RBF降雨量预测 注&#xff1a;程序和数据放在一个文件夹。 程序语言为matlab&#xff0c;程序可出预测效果图&#xff0c;指标图; 代码特点&#xff1a;参数化编程、参数可方便更改、代…

web前端学习笔记Day02

web学习Day02 一、页面布局 盒子模型 盒子将页面的所有标签都包含在了一个矩形区域content(内容区域)->padding(内边距区域)->border(边框区域)->margin(外边距区域) div标签: 一行只能显示一个&#xff08;独占一行&#xff09;width默认为父元素宽度&#xff0c…