对象直接赋值时,例如

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对象深拷贝(避免对象赋值,改变一个对象的值,另一个对象也变化)的更多相关文章

  1. vue爬坑:把对象中的数据给了某个变量,改变一个对象的值,另一个对象也变化

    今天做项目碰到了 一个坑,一个vue变量赋值给一个新的变量,对这个新的变量里的值做更改,vue的变量也变了.记录一下这个坑坑~~ 然后百度搜到了一个解决方案: 就是把变量先转成字符串,再把字符串转成对 ...

  2. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  3. js 数组对象深拷贝

    js 数组对象深拷贝 结论:对象的拷贝不能采用直接赋值的方式. 背景 踩过的坑如下: formData本来是父组件传过来的,但是我不想直接用,于是我直接赋值给一个formDataCopy的对象. 但是 ...

  4. 什么是 Java 对象深拷贝?面试必问!

    点击上方蓝色链接,关注并"设为星标" Java干货,每天及时推送 介绍 在Java语言里,当我们需要拷贝一个对象时,有两种类型的拷贝:浅拷贝与深拷贝. 浅拷贝只是拷贝了源对象的地址 ...

  5. Java clone() 方法克隆对象——深拷贝与浅拷贝

    基本数据类型引用数据类型特点 1.基本数据类型的特点:直接存储在栈(stack)中的数据 2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里 引用数据类型在栈中存储了指针,该指 ...

  6. [C#]对象深拷贝

    关键代码: /// <summary> /// 对象深拷贝 /// </summary> /// <typeparam name="T">泛型& ...

  7. .NEL IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  8. 【转】.NET IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  9. .NET IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  10. 剑指offer——合并两个排序的链表——对象、引用和赋值初接触

    题目描述:输入两个单调递增的链表,输出两个链表合成后的链表,当然,我们需要合成后的链表满足单调不减规则. 先公布结果: /* public class ListNode { int val; List ...

随机推荐

  1. varchar(100)和varchar(10)的区别

    mysql存储字段"abcdef",varchar(10)和varchar(100)都可以存储,且占用的磁盘存储空间是一样的,磁盘是按照实际长度存储.但,如果需要排序等内存操作,加 ...

  2. 在 Rime 上对输入法进行定制

    Rime Rime是什么?忘了!但是在用.而且很好用. 了解Rime历史,还是去官网吧! 定制 Rime有两个目录: 1. 程序目录 2. 用户目录 Rime 的程序目录 Windows 上 要看你安 ...

  3. 4组-Beta冲刺-4/5

    一.基本情况 队名:摸鲨鱼小队 组长博客:https://www.cnblogs.com/smallgrape/p/15604878.html github链接:https://github.com/ ...

  4. Vuex----Mutations

    注意: 只能通过 mutations里的函数才能修改 state 中的数据 第一种方法: const store = new Vuex.Store({ state:{ count:0 }, mutat ...

  5. 请求GET和POST的区别

    实际上GET和POST他们只有语义上的区别,之所以有我们所谓的区别是由于前端与后端达成的协议. 区别1:get请求不会附带请求体,而post请求有请求体. 区别2: get请求传递的信息量是有限的,适 ...

  6. 第12组 Beta冲刺 (5/5)

    1.1基本情况 ·队名:美少女战士 ·组长博客:https://www.cnblogs.com/yaningscnblogs/p/14016978.html ·作业博客:https://edu.cnb ...

  7. FCC 高级算法题 收银机找零钱

    Exact Change 设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) ...

  8. [C++] Linux TCP Socket 实例- 阻塞

    Linux平台 TCP Socket通信实例,发现用代码注释记笔记也不错 TCP server 阻塞 1 // 两个进程通过socket进行通信,client需要知道server的,server却不需 ...

  9. DB help

    using Dapper; using System; using System.Collections; using System.Collections.Generic; using System ...

  10. VBA中的集合

    Sub testSet() Dim c As New Collection c.Add ("A") c.Add (2) c.Add ("A") For i = ...