vue金典copy問(wèn)題：
父組件傳值給子組件時(shí)，子組件直接使用，會(huì)直接污染原數(shù)據(jù)；
父組件:
原數(shù)據(jù) data:[{id:1},{id:2},{id:3}];
當(dāng)data傳入子組件使用時(shí)直接使用data，循環(huán)渲染時(shí)會(huì)直接影響原數(shù)據(jù)
子組件：
需要使用數(shù)據(jù) this.list = this.data；
子組件使用list渲染，父組件對(duì)應(yīng)的值會(huì)跟著list變化而變化，渲染id：1時(shí)，返回繼續(xù)渲染id：2時(shí)發(fā)現(xiàn)原數(shù)據(jù)變成id:1,原數(shù)據(jù)污染；
這里說(shuō)明vue組件傳值根本問(wèn)題沒(méi)有避免
父組件傳值原則：父組件跟子組件值避免直接使用，父組件傳值必須使用一個(gè)不常使用的值，推薦傳值時(shí)在進(jìn)行賦值操作，且該值并不在父組件進(jìn)行渲染或使用；
子組件傳值原則：傳值同上；
子組件接收值時(shí)注意：組件接收值時(shí)應(yīng)做好最后一道防線，傳過(guò)來(lái)的數(shù)據(jù)有使用應(yīng)深度copy傳過(guò)來(lái)的值并附給自己需要使用的值，在進(jìn)行自己內(nèi)部使用；
解決！
copy：
實(shí)例數(shù)據(jù)：this.a = {id:1}；
淺度copy同等于我們普通賦值；例如：this.b = this.a;
深度copy：① this.b = JSON.parse(JSON.stringify(this.a));
? ? ? ? ? ? ? ? ? ② this.b = {...this.a};
區(qū)別：第一種方法使用js原生方法進(jìn)行copy，在個(gè)個(gè)版本的js中均可使用；原理:對(duì)一個(gè)數(shù)據(jù)進(jìn)行兩次轉(zhuǎn)換，當(dāng)轉(zhuǎn)換第一次時(shí)原數(shù)據(jù)類型發(fā)生改變，? ? 自動(dòng)生成一個(gè)新的數(shù)據(jù)，在對(duì)新生成的數(shù)據(jù)進(jìn)行二次轉(zhuǎn)換成我們需要的數(shù)據(jù)，實(shí)現(xiàn)深度copy； == Object轉(zhuǎn)String在轉(zhuǎn)Object；
第二種方法使用ES6解構(gòu)賦值進(jìn)行深度copy，原理：...把數(shù)據(jù)全部展開并且一一對(duì)上；詳情請(qǐng)查看ES6解構(gòu)賦值：https://www.runoob.com/w3cnote/deconstruction-assignment.html
前端小白繼續(xù)加油
