Vue淺拷貝和深拷貝如何實現

今天小編給大家分享一下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淺拷貝和深拷貝如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。