在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组

在 Vue 中使用 structuredClone 进行深拷贝来初始化对象内的数组

  • 一、引言
    • 1.什么是深拷贝?
    • 2.为什么使用 `structuredClone`?
    • 3.示例代码
    • 4.详细解释
    • 5.兼容性注意事项
  • 二、总结


一、引言

在前端开发中,处理复杂对象和数组时,深拷贝是一个常见的问题。Vue 3 提供了响应式系统来管理状态,但如果我们直接对对象进行赋值操作,可能会导致一些意外的问题。本文将介绍如何使用 structuredClone 方法在 Vue 中进行深拷贝,确保对象内的数组能够正确初始化。

1.什么是深拷贝?

深拷贝与浅拷贝的区别在于,深拷贝会递归地复制对象及其嵌套的所有子对象,而浅拷贝只是复制对象的引用。因此,深拷贝可以避免由于引用同一内存地址而导致的意外数据修改。

2.为什么使用 structuredClone

structuredClone 是一种现代的深拷贝方法,原生支持浏览器和 JavaScript 引擎。它可以高效地复制复杂的对象,包括嵌套对象和数组,而不会发生浅拷贝的问题。

3.示例代码

以下是一个在 Vue 3 项目中使用 structuredClone 进行深拷贝来初始化对象内数组的示例:

<template><div><button @click="initWxjlForm">Initialize Form</button><pre>{{ wxjlForm }}</pre></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const wxjlForm = reactive({name: '',age: null,hobbies: []});const initialFormState = {name: 'John Doe',age: 30,hobbies: ['reading', 'sports']};function initWxjlForm() {// 使用 structuredClone 深拷贝初始状态并赋值给 wxjlFormObject.assign(wxjlForm, structuredClone(initialFormState));}return {wxjlForm,initWxjlForm};}
};
</script>

4.详细解释

  1. 创建响应式对象:使用 Vue 3 的 reactive 函数创建一个响应式对象 wxjlForm,其中包含需要初始化的字段。

  2. 定义初始状态:定义一个包含初始数据的普通对象 initialFormState

  3. 深拷贝并初始化:在 initWxjlForm 函数中,使用 structuredClone 对初始状态对象进行深拷贝,然后使用 Object.assign 将深拷贝后的数据赋值到响应式对象 wxjlForm 上。这种方式确保了对象及其内部的数组都能被正确地深拷贝和初始化。

5.兼容性注意事项

structuredClone 是一个现代浏览器 API,并不完全兼容所有旧版浏览器。如果需要兼容旧版浏览器,可以考虑使用第三方库如 lodashcloneDeep 方法:

import cloneDeep from 'lodash/cloneDeep';function initWxjlForm() {Object.assign(wxjlForm, cloneDeep(initialFormState));
}

二、总结

通过使用 structuredClone,我们可以在 Vue 项目中高效且安全地进行深拷贝,确保对象及其内部数组在初始化时不会因为引用问题而出现意外修改。这对于处理复杂数据结构和维护应用状态的一致性非常有用。希望这篇文章能帮助你更好地理解和使用深拷贝方法来管理 Vue 应用中的状态。

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

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

相关文章

椭圆的几何要素

椭圆的几何要素 flyfish 椭圆的方程为 x 2 a 2 y 2 b 2 1 \frac{x^2}{a^2} \frac{y^2}{b^2} 1 a2x2​b2y2​1。 长半轴 a a a&#xff08;绿色虚线&#xff09;和短半轴 b b b&#xff08;紫色虚线&#xff09;。 焦点 F 1 ( − c , 0 ) F1(-c, 0) F1(−c,0)&#…

冒泡排序Java详细注释版

冒泡排序源代码&#xff0c;带有详细注释&#xff0c;希望可以帮助到大家&#xff0c;有用的话点个赞和收藏吧&#xff0c;感谢大家的阅读&#xff0c;Java小白一直在努力&#xff0c;承蒙大神们的厚爱。 定义 在程序设计语言中&#xff0c;排序算法主要有冒泡排序、快速排序、…

低代码开发:加速工业数智化转型发展

引言 在当今全球经济一体化和信息化的深度融合的大环境下&#xff0c;工业数智化转型已经成为推动制造业高质量发展的关键因素。这一转型不仅涉及生产过程的智能化、网络化&#xff0c;还涉及到企业管理、市场服务等全方位的数字化升级&#xff0c;其最终目标是为了实现更高效能…

暴雨讲堂|通往AGI的必由之路—AI agent是什么?

在三月份英伟达的新品发布会上&#xff0c;黄仁勋反复提及一个词汇— Generalist Embodied Agent&#xff0c;意为“通用具身智能体”&#xff0c;给观众留下了深刻的印象。其实具身智能指的是不同形态的拥有主动感知交互能力的机器人。其实&#xff0c;业界对它还有一个更为熟…

python如何安装ta-lib依赖包

在使用pip install ta-lib安装ta-lib库的时候,出现了以下错误信息。本文记录安装成功的整个过程。 解决办法 1、创建虚拟环境 我们使用conda进行创建一个python=3.8版本的虚拟环境 conda create -n python38 python==3.8激活创建好虚拟环境 conda activate python382、安装步…

媒体访谈 | 广告变现痛点有新解,俄罗斯市场成大热门?

今年一季度&#xff0c;中国自主研发游戏在海外市场实际销售收入达到了40.75亿美元&#xff0c;环比和同比均实现了超过5%的增长&#xff0c;出海&#xff0c;仍是游戏产品近些年来最主要的发展模式之一。 当今的市场环境正经历一系列深刻变革&#xff0c;移动游戏广告市场呈现…

python“__main__“的解读

Tutorial Gross tutorial 有些模块包含了仅供脚本使用的代码&#xff0c;比如解析命令行参数或从标准输入获取数据。 如果这样的模块被从不同的模块中导入&#xff0c;例如为了单元测试&#xff0c;脚本代码也会无意中执行。 这就是 if name ‘main’ 代码块的用武之地。除非…

IDEA集成Docker实现快捷部署

本文已收录于专栏 《运维》 目录 背景介绍优势特点操作步骤一、修改Docker配置二、配置Docker插件三、编写Maven插件四、构建Docker镜像五、创建Docker容器 总结提升 背景介绍 在我们手动通过Docker部署项目的时候&#xff0c;都是通过把打包好的jar包放到服务器上并且在服务器…

git提交遇见的<<<<<<<< HEAD无法运行程序问题

在项目文件目录下打开git bash Here 在命令行中输入 git reset --hard HEAD~1 进行复原 git reset --hard HEAD~1 即可

查找程序中隐藏界面的思路

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动 某些程序&#xff0c;它会有管理员界面&#xff08;比如棋牌游戏&#xff0c;它一般会有一个控制端界面&#xff0c;用来控制发牌、换牌&#xff09;&#xff0c;但是这种界…

【Java】线程池技术(三)ThreadPoolExecutor 状态与运行源码解析

ThreadPoolExecutor 状态 ThreadPoolExecutor 继承了 AbstractExecutorService&#xff0c;并实现了 ExecutorService 接口&#xff0c;用于管理线程。内部使用了原子整型 AtomicInteger ctl 来表示线程池状态和 Worker 数量。前 3 位表示线程池状态&#xff0c;后 29 位表示 …

python代码生成可执行文件

以下面转换图片尺寸的代码resize_images.py为例&#xff1a; 代码功能&#xff1a;原始图片放在img文件夹中&#xff0c;然后运行代码可以转换成指定分辨率&#xff0c;保存在同一目录下的新生成的文件夹中 import os import sys import cv2 from datetime import datetime f…

在React中,如何利用React.memo函数对函数组件进行优化?

React.memo 是 React 的一个高阶组件&#xff0c;用于对函数组件进行性能优化。它通过记忆化&#xff08;memoization&#xff09;来避免不必要的重新渲染。当组件的 props 没有变化时&#xff0c;React.memo 可以防止组件重新渲染&#xff0c;从而提高应用的性能。 使用 Reac…

wireshark抓包ssl数据出现ignored unknown record的原因

文章目录 前言一、出现原因二、wireshark抓包分析Ignored Unknown RecordTCP segment of a reassembled PDU 总结 前言 使用下面这个例子来观察记录层数据大于TCP MSS时用wireshark抓包出现ignored unknown record的情况并分析原因。 c语言利用openssl实现简单客户端和服务端&…

【LinuxC语言】sigaction

文章目录 前言功能函数定义struct sigaction 结构体使用示例总结前言 在Linux系统编程中,信号(Signal)是一种重要的进程间通信机制。信号可以用来通知进程发生了某个事件,比如中断、终止、非法内存访问等。处理信号的方式有多种,其中sigaction是一个强大且灵活的函数,用…

Rich Human Feedback for Text-to-Image Generation 读论文笔记

Rich Human Feedback for Text-to-Image Generation 读论文笔记 摘要方法细节收集数据的过程人类反馈确认 数据集VQA使用方法数据分析分数统计评价一致性&#xff08;pair alignment&#xff09; 实验模型模型架构模型变体模型其他优化 实验MetricsScoreHeatmapMisalignment 量…

什么是NLP-自然语言处理

什么是NLP-自然语言处理 什么是NLP开通NLP新建项目创建模型 什么是NLP NPL是面向算法小白用户的行业自适应标注、训练和服务平台。该产品支持文本实体抽取、文本分类、关键短语抽取、情感分析、关系抽取、短文本匹配、商品评价解析等 NLP 定制化算法能力&#xff0c;用户无需拥…

香港云服务器怎么处理高并发和突发流量?

处理香港云服务器的高并发和突发流量需要综合考虑多种因素&#xff0c;包括服务器配置优化、负载均衡、缓存策略、CDN加速以及监控和自动化调整等措施。以下是处理高并发和突发流量的一些关键步骤和建议&#xff1a; 1. 优化服务器配置 选择高性能实例&#xff1a;根据预期的并…

git-diff详解

NAME git-diff - Show changes between commits, commit and working tree, etc SYNOPSIS git diff [<options>] [<commit>] [--] [<path>…​] git diff [<options>] --cached [--merge-base] [<commit>] [--] [<path>…​] git diff …

【变量与常量】

1.基本程序 容器用来存放物品 声明变量 num 是个用来装整数的变量 &#xff01; 一 个整数变量需要 4 个 byte 存储&#xff0c; 计算机 在内存里为你分配了 4 个 byte 。int num;在代码中&#xff0c;声明一个变量。 常用变量类型 存储不同类型的数据需要声明不同类型的变…