vue对象深拷贝(避免对象赋值,改变一个对象的值,另一个对象也变化)
对象直接赋值时,例如
let b = { name: 'name', age: 12}
let a=b,
a.age = 13
console.log(b.age) // 13
由此可见,当改变 a 的属性值时,b也会随之改变,因为这是一个引用传递而不是值传递,a和b指向的是同一个内存地址,修改a后b所指向的地址的值也会发生改变。
如果我们不想让被赋值的对象跟着联动变化时,需使用深拷贝的方式
1. 创建一个js文件,deepclone.js
/**
* 对象深拷贝
*/
export const deepClone = data => {
var type = getObjType(data)
var obj
if (type === 'array') {
obj = []
} else if (type === 'object') {
obj = {}
} else {
// 不再具有下一层次
return data
}
if (type === 'array') {
for (var i = 0, len = data.length; i < len; i++) {
obj.push(deepClone(data[i]))
}
} else if (type === 'object') {
for (var key in data) {
obj[key] = deepClone(data[key])
}
}
return obj
}
2. 引入并使用
import { deepClone } from "deepClone.js";
this.cloneData= deepClone(this.data)
vue对象深拷贝(避免对象赋值,改变一个对象的值,另一个对象也变化)的更多相关文章
- vue爬坑:把对象中的数据给了某个变量,改变一个对象的值,另一个对象也变化
今天做项目碰到了 一个坑,一个vue变量赋值给一个新的变量,对这个新的变量里的值做更改,vue的变量也变了.记录一下这个坑坑~~ 然后百度搜到了一个解决方案: 就是把变量先转成字符串,再把字符串转成对 ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- js 数组对象深拷贝
js 数组对象深拷贝 结论:对象的拷贝不能采用直接赋值的方式. 背景 踩过的坑如下: formData本来是父组件传过来的,但是我不想直接用,于是我直接赋值给一个formDataCopy的对象. 但是 ...
- 什么是 Java 对象深拷贝?面试必问!
点击上方蓝色链接,关注并"设为星标" Java干货,每天及时推送 介绍 在Java语言里,当我们需要拷贝一个对象时,有两种类型的拷贝:浅拷贝与深拷贝. 浅拷贝只是拷贝了源对象的地址 ...
- Java clone() 方法克隆对象——深拷贝与浅拷贝
基本数据类型引用数据类型特点 1.基本数据类型的特点:直接存储在栈(stack)中的数据 2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里 引用数据类型在栈中存储了指针,该指 ...
- [C#]对象深拷贝
关键代码: /// <summary> /// 对象深拷贝 /// </summary> /// <typeparam name="T">泛型& ...
- .NEL IL实现对象深拷贝
对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...
- 【转】.NET IL实现对象深拷贝
对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...
- .NET IL实现对象深拷贝
对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...
- 剑指offer——合并两个排序的链表——对象、引用和赋值初接触
题目描述:输入两个单调递增的链表,输出两个链表合成后的链表,当然,我们需要合成后的链表满足单调不减规则. 先公布结果: /* public class ListNode { int val; List ...
随机推荐
- 群晖Video Station不支持部分视频的解释
网络上都是替换ffmpeg插件的做法,无非就是替换了3个文件,然后再对其中一个文件进行修改. 然而在DSM7.0.1+VS3.0.2中,这个方法根本无用,最好的结果是之前无法播放的视频播放起来转圈圈而 ...
- 使用DockerCompose部署微服务项目(基于Springboot搭建一个简易计数器)
准备Dockerfile FROM java:8 #基于jdk8的环境 COPY *.jar /app.jar #拷贝所有的jar包到/app.jar目录下 CMD ["--server.p ...
- 【逆向】x64dbg设置条件断点 比较内存字符串是否相等
前言 在OD中可以设置条件断点,通过表达式对字符串数据进行比较,比如在CreateFile打开某个特定文件的时候让调试器中断.但是在x32dbg.x64dbg中因为表达式只支持整数,不支持字符串和其它 ...
- Gabor滤波(个人学习)
Gabor滤波 1.优点 Gabor小波与人类视觉系统中简单细胞的视觉刺激响应非常相似.在提取目标的局部空间和频率与信息方面具有良好的特性. 对于图像的边缘敏感,能够提供良好的方向选择和尺度选择.因此 ...
- P1296 奶牛的耳语
P1296 奶牛的耳语 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 本题核心思路: 1.读入后要排序以达到剪枝的目的 2.模拟,遇到不能再交流就转入下一头牛,否则计数器加一 3. ...
- Navicat15激活
1.下载Navicat for MySQL 15 https://www.navicat.com.cn/download/navicat-for-mysql 2.下载激活工具 注意:因某些限制,下载链 ...
- YII oracle
以 11.2 为例 , 注意必须要与数据库版本对应下载如下两个文件instantclient-basic-linux.x64-11.2.0.4.0.zip https://download.oracl ...
- C语言初级阶段5——函数2
C语言初级阶段5--函数2 址传递 1.地址:在定义变量,数组,函数等等,系统会自动给分配他们的内存区域(地址),把这个数据放到这个地址上面. 2.&:&a 得到a的地址编号 3.*: ...
- Linux配置
JDK安装 一.登录虚拟机进入终端切换到root用户,输入:su 接着输入密码 再输入:cd - 回到root用户 二.接着在终端进入对应文件新建一个装jdk包的文件夹,输入:mkdir +目录名称 ...
- Jmeter----Badboy录制
Badboy Badboy安装后出现错误,需要设置 Preferences-->General-->Enable Recording on Startup?的√去掉,play-->S ...