Vue浅拷贝和深拷贝实现方案

更新时间：2023年03月03日 09:42:51 作者：nav-item

在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别，这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下

前言

在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别。

一、数据类型

1.1.基本数据类型

字符串（Sring）、布尔值（Boolean）和数字（Number）

1.2.引用数据类型

数组（Array）和对象（Object）

1.3.区别

基本数据类型是存储在栈内存中。而引用类型存放的值是指向数据的引用，而不是数据本身，真实数据是存放在堆内存里，具体见如下：

在这里插入图片描述

二、浅拷贝

2.1.定义

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。

2.2.浅拷贝特点

对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个。

var a = 10
var b = a
b = 20
console.log("a",a) //10
console.log("b",b) //20

在这里插入图片描述

对于引用类型，比如数组或者类对象，因为引用类型是引用传递，所以浅拷贝只是把内存地址赋值给了成员变量，它们指向了同一内存空间。改变其中一个，会对另外一个也产生影响

var obj = {
    a:"AAA"
}
var obj2 = obj
obj2.a = "BBB"
console.log("obj",obj) //{name: "BBB"}
console.log("obj2",obj2) //{name: "BBB"}

在这里插入图片描述

三、深拷贝

3.1.定义

深拷贝，在拷贝引用类型成员变量时，为引用类型的数据成员另辟了一个独立的内存空间，实现真正内容上的拷贝。

3.2.深拷贝特点

对于基本数据类型的成员对象，因为基础数据类型是值传递的，所以是直接将属性值赋值给新的对象。基础类型的拷贝，其中一个对象修改该值，不会影响另外一个（和浅拷贝一样）。

对于引用类型，比如数组或者类对象，深拷贝会新建一个对象空间，然后拷贝里面的内容，所以它们指向了不同的内存空间。改变其中一个，不会对另外一个也产生影响。

var obj = {
    a:"AAA"
}
var obj2 = {} // 创建新的对象
obj2 = obj
obj2.a = "BBB"
console.log("obj",obj) //{name: "AAA"}
console.log("obj2",obj2) //{name: "BBB"}

在这里插入图片描述

四、拷贝实现方案

4.1.Object.assign()

单级结构时深拷贝，多级结构浅拷贝，Object.assign()对象是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，将返回目标对象。
a）单级结构（一级拷贝是深拷贝）：

var obj = {
    a: 10,
}
var obj2 = Object.assign({}, obj);
obj2.a = 20
console.log("obj",obj); //{a: 10}
console.log("obj2",obj2) //{a: 20}

b）多级结构（一级拷贝是浅拷贝，修改二级对象还是会影响原对象）：

var obj = {
    a: 10,
    b: {
        c:"AAA",
        d:666
    }
}
var obj2 = Object.assign({}, obj);
obj2.b.c = "BBB"
console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}}
console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}

4.2.concat()

单级结构时深拷贝，多级结构浅拷贝
a）单级结构（一级拷贝是深拷贝）：

let arr = [1, 2];
let arr2 = arr.concat();
arr2[1] = 3;
console.log("arr",arr) //[1, 2]
console.log("arr2",arr2) //[1, 3]

b）多级结构（一级拷贝是浅拷贝）：

let arr = [1, 2, {
    a: 'AAA'
}];
let arr2 = arr.concat();
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'BBB'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

4.3.slice()

单级结构时深拷贝，多级结构浅拷贝
a）单级结构（一级拷贝是深拷贝）：

let arr = [1, 2, 3];
let arr2 = arr.slice();
arr2[1] = 4;
console.log("arr",arr) //[1, 2, 3]
console.log("arr2",arr2) //[1, 4, 3]

b）多级结构（一级拷贝是浅拷贝）：

let arr = [1, 2, {a:'AAA'}];
let arr2 = arr.slice();
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'BBB'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

4.4.JSON.parse(JSON.stringify())

用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。
单级多级均为深拷贝，但需要注意无法拷贝RegExp对象、function和symbol

let arr = [1, 2, {a:'AAA'}];
let arr2 = JSON.parse(JSON.stringify(arr))
arr2[2].a = 'BBB';
console.log("arr",arr) //[1, 2, {a: 'AAA'}]
console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]

4.5.cloneDeep()

单级多级均为深拷贝，使用lodash工具中cloneDeep方法实现深拷贝，需要通过npm引入lodash库
npm i -save lodash //全局安装

<script>
  import _ from 'lodash';

  export default {
    name: 'Test',
    mounted() {
      const arr = [1, 2, { a: 'AAA' }];
      const arr2 = _.cloneDeep(arr);
      arr2[2].a = 'BBB';
      console.log('arr', arr); // [1, 2, {a: 'AAA'}]
      console.log('arr2', arr2); // [1, 2, {a: 'BBB'}]
    },
  };
</script>

五、结论

类型	第一级为基础数据类型	原数据中包含子对象
浅拷贝	改变不会使原始数据改变	改变会使原始数据改变
深拷贝	改变不会使原始数据改变	改变不会使原始数据改变

到此这篇关于Vue浅拷贝和深拷贝实现方案的文章就介绍到这了,更多相关vue浅拷贝和深拷贝区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue cli3.0结合echarts3.0与地图的使用方法示例
这篇文章主要给大家介绍了关于vue cli3.0结合echarts3.0与地图的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
Vue刷新修改页面中数据的方法
今天小编就为大家分享一篇Vue刷新修改页面中数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
elementui实现表格自定义排序的示例代码
本文主要介绍了elementui实现表格自定义排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
Vue中使用 setTimeout() setInterval()函数的问题
这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
2018-09-09
vue-admin-template框架搭建及应用小结
vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发，这篇文章主要介绍了vue-admin-template框架搭建及应用,需要的朋友可以参考下
2023-05-05
Vue使用axios引起的后台session不同操作
这篇文章主要介绍了Vue使用axios引起的后台session不同操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue中子组件调用兄弟组件方法
这篇文章主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue中使用Echarts仪表盘展示实时数据的实现
这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue3中keep-alive和vue-router的结合使用方式
这篇文章主要介绍了vue3中keep-alive和vue-router的结合使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue 计数器的实现
这篇文章主要介绍了Vue 计数器的实现，主要利用HTML实现步骤现在页面上简单实现一个计数器，内容简单且详细,需要的朋友可以参考一下
2021-10-10