初次了解浅拷贝与深拷贝|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

在青训营项目开发的时候我遇到了组件不能正常显示的问题，部分代码如下：

  render: ({ props, model }) => {
    return (
      <ElRadioGroup v-model={model.default} size={props.size}>
        {(props.options || [{label:1,value:"预览1"},{label:2,value:"预览2"}]).map((item, index) => {
          return <ElRadio label={item.label}>{item.value}</ElRadio>
        })}
      </ElRadioGroup>

在经过询问大佬以及在社区检索后得知这是拷贝方式的不同，这里应该用深拷贝方法直接获取目标对象及其值，即将
<ElRadioGroup v-model={model.default} size={props.size}>
改为
<ElRadioGroup {...model.default} size={props.size}>
那么什么是浅拷贝，什么是深拷贝呢？在下面我来说一下我的理解。

深拷贝与浅拷贝

JavaScript中有两种数据类型，基础数据类型和引用数据类型。基础数据类型是存放在栈内存中的，而引用数据类型是存放在栈地址引用的一个堆内存中

1. 基础数据类型： undefined、boolean、number、string、null，保存在栈内存中的简单数据

2. 引用数据类型：Array、对象、Function，保存在堆内存空间中

浅拷贝

浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化。。
浅拷贝如果拷贝对象内部的数据是基础数据类型，那么直接拷贝，新对象修改值，不会影响原有的值，如果拷贝的对象是一个引用数据类型，那么会是一个值的引用，此时新拷贝对象修改其值会影响原有的值。
浅拷贝只会拷贝一层，拷贝的内部引用数据类型是同一份，简单来说就是浅拷贝只复制对象空间而不复制资源

深拷贝

深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变。
深拷贝本质上就是无论原对象值是基础数据类型，还是引用数据类型，新拷贝的对象修改的是对象内部的值，并不会影响原有对象的值。

总之，如果使用浅拷贝，且拷贝的是引用数据类型，那么新拷贝的值与原有值是同一份引用，新值修改会影响原有的值。需要使用深拷贝来解决这个问题。