vue中js深拷贝

最新推荐文章于 2024-08-16 17:36:42 发布
原创 最新推荐文章于 2024-08-16 17:36:42 发布 · 119 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

博客讲述在Vue里，将写死的this.option赋值给this.copyOption，请求接口后把接口数据再赋给this.copyOption，发现this.option数据也改变，怀疑是引用同一对象或内存地址，于是采用深拷贝方法，使this.copyOption数据变化时this.option不受影响。 
this.copyOption = this.option

this.option为写死的数据，将this.option赋值给this.copyOption，然后请求接口，将接口数据赋值给this.copyOption，我发现this.option里面的数据竟然和this.copyOption里面的数据一样了，我怀疑是引用了同一个对象或内存地址，所以这里我使用了深拷贝的方法

this.copyOption = JSON.parse(JSON.stringify(this.option));

这样this.copyOption里面的数据发生变化时this.option的数据就不会发生变化并赋值给this.copyOption

hmbbpdx
关注
Vue3 完美实现深拷贝
一碗清深的博客
07-18 2029
在 Vue3 中，仍然可以和 Vue2 使用 require('lodash').cloneDeep 类似的方式来进行深拷贝。Vue3 的模块系统和 Vue2 相比没有根本性的变化，它依然支持CommonJS的require语法（尽管在使用如Vite这样的现代前端工具时，ES模块导入import是更推荐的方式）。
vue深拷贝：1、使用JSON.parse()和JSON.stringify()；2、使用Lodash库；3、使用深拷贝函数（采用递归的方式）
专注于计算机研发知识和资讯分享
02-26 672
return obj;[] : {};
【Vue.JS】实现copy复制功能
qq_46057971的博客
11-08 554
copy能够实现，还未进行值是否为空判断，其次一个页面可以使用多个copy。2.编写copy的js，放在methods。1.编写需要复制的内容。
Vue 深拷贝：把对象赋给另一个变量，修改新变量，原对象也改变
m0_46664771的博客
04-27 1240
把对象先转成字符串,再把字符串转成对象，再进行赋值给新变量 此时再改变新变量，原对象就不会变了 var value = JSON.parse(JSON.stringify(object.value)); 感谢这篇博客 https://www.cnblogs.com/sjxx/p/10414506.html ...
vue深拷贝的三种实现方式
热门推荐
weixin_51747462的博客
01-26 2万+
vue深拷贝的三种实现方式 js深拷贝的三种实现方式
vuejs复制文本_使用vuejs的辅助文本显示
cuk5239的博客
07-31 405
vuejs复制文本 标题 (v-title) Auxiliary text display（like el-tooltip）. 辅助文本显示（如el-tooltip）。 View demo 查看演示 Download Source 下载源 用法 (Usage) 安装 (Install) npm install --save v-title 需要element-ui (Require e...
vue深拷贝的几种实现方式
hualinger的博客
09-06 8142
只有一级属性为深拷贝，二级属性后就是浅拷贝，如[1,2,3,[1,2,3]]满足一般使用场景，但无法实现对象中方法(function)的深拷贝。6、数组使用数组方法进行深拷贝（concat、slice）7、使用Vue提供的观察者模式实现数组深度复制。8、使用ES6提供的扩展运算符实现数组深度复制。3、jQuery的extend方法实现深拷贝。只有一级属性为深拷贝，二级属性后就是浅拷贝。只有一级属性为深拷贝，二级属性后就是浅拷贝。比较全面的深拷贝，缺点是较为繁琐。1、通过递归方式实现深拷贝。
vue 使用lodash实现对象数组深拷贝操作
10-14
本篇文章主要探讨了如何在Vue中利用lodash库实现对象数组的深拷贝。 首先，lodash是一个非常实用的JavaScript工具库，提供了大量的实用函数，包括深拷贝功能。在Vue项目中，我们可以通过`npm install lodash`或者`...
Vue深拷贝、浅拷贝
weixin_44590591的博客
09-14 952
原理： 深拷贝：在堆里边开辟一个新的空间，存放自己的属性值 浅拷贝：新对象赋值，只是取的旧对象栈中的值（当一个对象赋给另一个对象时，修改另一个对象的值会影响前一个对象的值） 使用方法 1、浅拷贝 //如果修改b对象中的name，会同时把a对象中的name修改掉 let a = {name:"浅拷贝"}; let b = {name:"深拷贝"}; b = a; 2、深拷贝 //JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作 // 深拷贝：防止修改原
vue实现深拷贝的方法
花生日记
05-27 5377
5.在 vue中，使用方法进行深拷贝的时候，需要注意： （1）如果属性B和变量A共享同一个对象，那么可以使用方法将变量A的属性赋值给变量B （3）在方法中定义一个新的类来代替原来的类，将两个方法的作用域进行区分。我们来看一下深拷贝的代码： 我们看到，这里使用了数组（string）和对象（object）进行深拷贝，这里我们首先对数组（string）和对象（object）进行了复制操作，然后在需要进行修改的地方，使用了vue-cli中的属性（value）来进行修改。但要实现深拷贝，需要两个对象具有相同的属性。
Vue 点击复制(copy)功能【JS原生】
sunshineTing2的博客
02-25 2729
<el-button :type="successCopy ? 'success': 'primary'" @click="copyLink('http://xxx.com')"> <span>复制</span> <i v-if="successCopy" class="el-icon-circle-check"></i> </el-button> <!-- select()方法只对 <input> 和 &lt..
vue深拷贝，将拿到的复杂数据拷贝一份赋值给新数据
m0_68177019的博客
10-20 1015
2.拷贝单层：将date的值拷贝一份赋值给form，后续修改form，date的值不会受影响。-main.js里挂载。修改main.js后需重启服务器。vue下，使用时可以挂载到全局，后续所有页面都能调用。弊端：只能拿到第一层数据，再深入无法取到。
vue深拷贝的几种方式
weixin_42498594的博客
08-16 2389
比较全面的深拷贝，缺点比较繁琐。
Vue进阶（幺叁幺）：父子组件传值实现数据深拷贝
IT全栈 华强工作室
06-16 4042
前言 在使用vue进行前端开发的时候，遇到了在java中开发过程中遇到的问题：对象引用， 当把A数组赋值给B数组后，B数组push了一个new value， 导致A数组中也多了一个value，一下子我就想到了对象的引用了，因为java遇到过，也解决过呀！ 问题分析 当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下 数组： var a = [1,2,3]; var b = a; b.push(4);
Vue深浅拷贝
晨的一朵云的博客
09-30 9937
个人理解，深/浅拷贝其实就是指向性的问题（说法可能不是很准确，话糙理不糙）。 浅拷贝：新对象赋值，只是取的旧对象栈中的值，也就是引用对象的值。浅拷贝出的所有变量都只是指向了一处而已，故会互相干涉。 深拷贝：会在堆里边开辟一个空间，存放自己的对象值。深拷贝出的所有变量都会开辟自己的空间来存放自己的值，因此指向也各不相同，故不会互相干涉。 简单的赋值只是做了浅拷贝，所以才会出现我明明给了b值却连a的值也改变的情况，如下： 例子1: var a = 1,...
vue对象深拷贝_Vue 对数据对象实现深拷贝赋值
weixin_39980893的博客
12-20 2478
在日常的Vue开发工作中，我们经常对请求来的数据进行变量赋值操作，再用变量去进行数据渲染。 然而我们知道，我们经常用的赋值方式 “=” 实际上属于数据的浅拷贝，也就是当你改变赋值变量时，原数据也会发生相应变化。var a = ['1', '2', '3', '4', '5'];var b = a;b[0] = '2';console.log(a); // ['2', '2', '3', '...
vue浅拷贝与深拷贝
w_t_y_y的博客
04-14 1万+
一、数据类型： 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。 1、基本数据类型的特点：直接存储在栈(stack)中的数据； 2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里。 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。 二、浅拷贝与深拷贝： 1、定义：深拷贝和浅拷贝是只针对Object
【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法
weixin_30289831的博客
11-24 9742
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。 我们来举个浅拷贝例子： let a=[0,1,2,3,4], b=a; console.log(a===...
vue中的深拷贝
最新发布
05-10
### Vue.js 中深拷贝的实现方式及使用场景 #### 深拷贝的定义与作用 深拷贝是指创建一个新的对象或数组，这个新的对象或数组会递归地复制源对象中的每一个属性及其子属性。这意味着如果源对象中有嵌套的对象或者数组，这些嵌套的内容也会被完全复制到目标对象中[^1]。这种方式确保了对副本的任何修改不会影响到原始数据。 #### 常见的深拷贝实现方法 以下是几种常见的深拷贝实现方式： 1. **利用 `JSON.parse` 和 `JSON.stringify`** 这是最简单的一种深拷贝方法，适用于大多数基本类型的对象和数组。不过需要注意的是，这种方法无法处理函数、`undefined` 或者某些特殊的类型（如日期、正则表达式等），并且不支持循环引用。 ```javascript const originalObj = { id: 1, name: '张三', age: 10 }; const deepCopiedObj = JSON.parse(JSON.stringify(originalObj)); ``` 2. **借助第三方库（如 Lodash 的 `cloneDeep` 方法）** 使用像 Lodash 这样的工具库可以提供更为强大的深拷贝功能，能够解决很多原生 JavaScript 方法所不能覆盖的特殊情况。 ```javascript import _ from 'lodash'; const originalObj = { date: new Date(), regex: /abc/ }; const deepCopiedObj = _.cloneDeep(originalObj); ``` 3. **自定义递归函数** 可以手动编写一个递归函数来完成深拷贝的任务，这样可以根据具体需求调整行为，例如保留函数或其他特殊类型的值。 ```javascript function deepClone(obj) { if (typeof obj !== 'object' || obj === null) return obj; if (Array.isArray(obj)) { return obj.map(item => deepClone(item)); } const clone = {}; for (const key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key]); } } return clone; } const originalObj = { nested: { value: true }, array: [1, 2, 3] }; const deepCopiedObj = deepClone(originalObj); ``` 4. **使用 `structuredClone` API** 在现代浏览器环境中，可以直接使用 `structuredClone` 来进行深拷贝操作。此方法相较于传统的 `JSON.parse` 更加强大且安全。 ```javascript const originalObj = { set: new Set([1, 2]), map: new Map([[1, 'one']]) }; const deepCopiedObj = structuredClone(originalObj); ``` #### 使用场景分析 - 当需要在一个组件内部保存一份独立的数据副本时，可以通过深拷贝避免外部状态变化带来的意外影响[^1]。 - 数据传输过程中，比如从父级向子级传递复杂结构的数据时，为了避免子组件无意间更改上游数据而导致错误传播，可以选择先做一次深拷贝再传入[^2]。 - 编辑表单提交前暂存用户的初始输入作为对比依据，之后无论用户如何改动临时存储区域里的资料，始端记录依旧保持稳定不受干扰。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值