在用 Vue 的父子組件傳值時遇到一個冷門的問題，子組件改變值后父組件的值也隨之改變了，特此記錄下原因和解決方式。再系統(tǒng)梳理下 JavaScript 的深拷貝與淺拷貝相關(guān)知識點。

1. 問題描述

父組件傳值給子組件，子組件改變傳過來的值后，父組件的值也會跟著改變。這個問題比較冷門，平時如果對組件通信使用得比較簡單，一般不會遇到。

2. 原因剖析

父子組件傳值的時候涉及雙向綁定，當傳值為 object 類型時，傳值之后數(shù)據(jù)源會被改變。

下文詳細講。

3. 解決方案

我目前采用的解決辦法是：傳值的時候不要直接傳數(shù)據(jù)源，而是通過拷貝或者定義新變量等方式傳值。

簡單處理就 JSON.parse(JSON.stringify(obj))，但是這種簡單粗暴的方法有其局限性。當值為 undefined、function、symbol 會在轉(zhuǎn)換過程中被忽略。所以，對象值有這三種的話用這種方法會導致屬性丟失。

剩下的就是自寫深拷貝的工具函數(shù)，或者直接借助第三方的庫函數(shù)，下面展開講。

4. 深拷貝和淺拷貝

JavaScript中的淺拷貝與深拷貝，只是針對復雜數(shù)據(jù)類型（Object，Array）的復制問題。淺拷貝與深拷貝都可以實現(xiàn)在已有對象上再生出一份的作用。但是對象的實例是存儲在堆內(nèi)存中然后通過一個引用值去操作對象，由此拷貝的時候就存在兩種情況了：拷貝引用和拷貝實例，這也是淺拷貝和深拷貝的區(qū)別。

下圖為JavaScript復雜數(shù)據(jù)類型的淺拷貝示意圖：

淺拷貝是拷貝引用，拷貝后的引用都是指向同一個對象的實例，彼此之間的操作會互相影響。

值得注意的是：Object.assgin() 是淺拷貝，它只能深拷貝第一層，深層的還是淺拷貝。因為 Object.assign() 拷貝的是屬性值。假如源對象的屬性值是一個對象的引用，那么它也只指向那個引用。（摘選自MDN）

MDN講述 assign 的時候，就有一個典型的例子，這里是文章鏈接。

下面列舉第一類淺拷貝 - 拷貝原對象的引用：

/** * 對象的淺拷貝 */var obj1 = { name:’wenyuan’, age: 22}var obj2 = obj1;obj2[’job’] = ’coder’;console.log(obj1); //Object {name: 'wenyuan', age: 22, job: 'coder'}console.log(obj2); //Object {name: 'wenyuan', age: 0, job: 'coder'}/* ------------------------- 華麗的分割線 ------------------------- *//** * 數(shù)組的淺拷貝 */var arr1 = [1, 2, 3, ’4’];var arr2 = arr1;arr2[1] = 'test'; console.log(arr1); // [1, 'test', 3, '4']console.log(arr2); // [1, 'test', 3, '4']

接下來看第二類淺拷貝 - 源對象拷貝實例，其屬性對象拷貝引用：

這種情況，外層源對象是拷貝實例，如果其屬性元素為復雜數(shù)據(jù)類型（Object、Array）時，內(nèi)層元素拷貝引用。

對源對象直接操作，不影響另外一個對象，但是對其屬性操作時候，會改變另外一個對象的屬性的值。

/** * 對象的淺拷貝 * jQuery的 $.extend(a,b) 或 $.extend({},a,b) */var obj1 = { name:’wenyuan’, age: 22, social: { blog: ’www.wenyuanblog.com’ }, skills: [’js’, ’html’, ’css’, ’python’]}var obj2 = $.extend({},obj1);console.log(obj1 === obj2) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.social === obj2.social) // 輸出true，說明對于Object類型的屬性是拷貝引用console.log(obj1.skills === obj2.skills) // 輸出true，說明對于Array類型的屬性是拷貝引用/** * 對象的淺拷貝 * ES6的 Object.assign() 和 對象擴展運算符... */var obj1 = { name:’wenyuan’, age: 22, social: { blog: ’www.wenyuanblog.com’ }, skills: [’js’, ’html’, ’css’, ’python’]}var obj2 = Object.assign({},obj1);console.log(obj1 === obj2) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.social === obj2.social) // 輸出true，說明對于Object類型的屬性是拷貝引用console.log(obj1.skills === obj2.skills) // 輸出true，說明對于Array類型的屬性是拷貝引用var obj3 = {...obj1};console.log(obj1 === obj3) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.skills === obj3.skills) // 輸出true，說明對于Array類型的屬性是拷貝引用console.log(obj1.skills === obj3.skills) // 輸出true，說明對于Array類型的屬性是拷貝引用/* ------------------------- 華麗的分割線 ------------------------- *//** * 數(shù)組的淺拷貝 * Array.prototype.slice() */var arr1 = [{name: 'wenyuan'}, {name: 'Evan You'}];var arr2 = arr1.slice(0);console.log(arr1 === arr2); // 輸出false，說明外層數(shù)組拷貝的是實例console.log(arr1[0] === arr2[0]); // 輸出true，說明其元素拷貝的是引用/** * 數(shù)組的淺拷貝 * Array.prototype.concat() */var arr1 = [{name: 'wenyuan'}, {name: 'Evan You'}];var arr2 = arr1.concat();console.log(arr1 === arr2); // 輸出false，說明外層數(shù)組拷貝的是實例console.log(arr1[0] === arr2[0]); // 輸出true，說明其元素拷貝的是引用/** * 數(shù)組的淺拷貝 * ES6的 Object.assign() 和 對象擴展運算符... * 由于數(shù)組是特殊的對象，所以ES6中的這種方式也可以用于數(shù)組 */var arr1 = [{name: 'wenyuan'}, {name: 'Evan You'}];var arr2 = Object.assign([],arr1)var arr3 = { ...arr1 };console.log(arr1 === arr2); // 輸出false，說明外層數(shù)組拷貝的是實例console.log(arr1 === arr3); // 輸出false，說明外層數(shù)組拷貝的是實例console.log(arr1[0] === arr2[0]); // 輸出true，說明其元素拷貝的是引用console.log(arr1[0] === arr3[0]); // 輸出true，說明其元素拷貝的是引用 深拷貝

在堆中重新分配內(nèi)存，并且把源對象所有屬性都進行新建拷貝，以保證深拷貝的對象的引用圖不包含任何原有對象或?qū)ο髨D上的任何對象，拷貝后的對象與原來的對象是完全隔離，互不影響。

下面列舉一些深拷貝的例子：

/** * 對象的深拷貝 * JSON.stringify()和JSON.parse() * 這種深拷貝最簡單，但有其局限性，上文已經(jīng)提到過了 */var obj1 = { name:’wenyuan’, age: 22, social: { blog: ’www.wenyuanblog.com’ }, skills: [’js’, ’html’, ’css’, ’python’]}var obj2 = JSON.parse(JSON.stringify(obj1));console.log(obj1 === obj2) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.social === obj2.social) // 輸出false，說明對于Object類型的屬性也是拷貝實例console.log(obj1.skills === obj2.skills) // 輸出false，說明對于Array類型的屬性也是拷貝實例/** * 對象的深拷貝 * jQuery的 $.extend(true,a,b) */var obj1 = { name:’wenyuan’, age: 22, social: { blog: ’www.wenyuanblog.com’ }, skills: [’js’, ’html’, ’css’, ’python’]}var obj2 = $.extend(true,obj1);console.log(obj1 === obj2) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.social === obj2.social) // 輸出false，說明對于Object類型的屬性也是拷貝實例console.log(obj1.skills === obj2.skills) // 輸出false，說明對于Array類型的屬性也是拷貝實例/** * 對象的深拷貝 * 也可以自己寫一個函數(shù)實現(xiàn)，用遞歸+判斷，注意別進入死循環(huán)就好 * 這里不舉例了，以前我整理過一篇常用工具類函數(shù)的博客，里面包含了深拷貝函數(shù) *//** * 對象的深拷貝 * lodash的_.cloneDeep */var obj1 = { name:’wenyuan’, age: 22, social: { blog: ’www.wenyuanblog.com’ }, skills: [’js’, ’html’, ’css’, ’python’]}var obj2 = _.cloneDeep(obj1);console.log(obj1 === obj2) // 輸出false，說明外層數(shù)組拷貝的是實例console.log(obj1.social === obj2.social) // 輸出false，說明對于Object類型的屬性也是拷貝實例console.log(obj1.skills === obj2.skills) // 輸出false，說明對于Array類型的屬性也是拷貝實例

以上就是JavaScript中的淺拷貝與深拷貝的知識點，以代碼的形式記錄下來，方便回顧。

到此這篇關(guān)于Vue父子組件傳值的一些坑的文章就介紹到這了,更多相關(guān)Vue父子組件傳值內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！