場景：

頁面有新增，編輯，刪除按鈕，可以編輯表格中的某行數(shù)據(jù)，頁面表格數(shù)據(jù)是從后臺獲取的，點(diǎn)擊編輯打開dailog，將那行數(shù)據(jù)賦給ruleForm，發(fā)現(xiàn)Form表單無法編輯了，select多選框無法選擇，刪除，datepicker等組件也會出現(xiàn)這種不能編輯的情況。

select代碼如下

<el-select style="margin:0 5px" 
	v-model="ruleForm.selectValue" 
	clearable 
	placeholder="類型">
    <el-option v-for="item in group" :key="item.value" :label="item.type" :value="item.value"></el-option>
</el-select>

后臺返回數(shù)據(jù)為row，通過Object.assign進(jìn)行拷貝

this.ruleForm = Object.assign({},row)    //this.ruleForm為表單數(shù)據(jù)，row為后臺返回的數(shù)據(jù)信息

原因：

通過Object.assign直接將后臺返回的數(shù)據(jù)賦值給form，后臺返回的數(shù)據(jù)中沒有select model 綁定的數(shù)據(jù)，而vue 無法監(jiān)聽動態(tài)新增的屬性的變化。
data中定義的屬性為

ruleForm :{
   name:null,
   selectValue:null, //select綁定的值
   age:null,
   address:null
}

而后臺返回的數(shù)據(jù)中沒有selectValue屬性，如下

temp:{
   name:null,
   age:null,
   address:null
}

解決：

• 拷貝時加上初始化時的數(shù)據(jù)格式

this.ruleForm = Object.assign({},this.ruleForm,row)

• 用 $set 來為這些屬性賦值.

  <el-select style="margin:0 5px" 
  	v-model="ruleForm.selectValue"
  	@change="$set(ruleForm,ruleForm.selectValue,$event)" 
  	clearable 
 	placeholder="類型">
         <el-option v-for="item in group" :key="item.value" :label="item.type" :value="item.value"></el-option>
  </el-select>

淺拷貝和深拷貝

• 淺拷貝： 將原對象或原數(shù)組的引用直接賦給新對象，新數(shù)組，新對象／數(shù)組只是原對象的一個引用
• 深拷貝： 創(chuàng)建一個新的對象和數(shù)組，將原對象的各項(xiàng)屬性的“值”（數(shù)組的所有元素）拷貝過來，是“值”而不是“引用”

有時候希望在改變新的數(shù)組（對象）的時候，不改變原數(shù)組（對象）
例如：var newObj = obj; newObj.xxx = xxx 實(shí)際上，newObj和obj兩個引用指向的是同一個對象，修改了newObj，也就等同于修改了obj。

Object.assign()實(shí)現(xiàn)淺復(fù)制。

• 合并之后所有被合并的對象和合并的對象都會變
• 如果目標(biāo)對象中的屬性具有相同的鍵，則它們將被源中的屬性覆蓋。后來的消息來源的屬性將同樣覆蓋較早的屬性。

場景如下：

if(lable ===  '1'){
 this.first= Object.assign([],row);
}else if(lable ===  '2'){
 this.second= Object.assign([],row);
}
console.log(this.first) 
console.log(this.second) 

這時會發(fā)現(xiàn)當(dāng)label為1時，this.second的值也被改寫成與this.first相同的數(shù)據(jù)

文檔中的例子

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);	// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);	// expected output: Object { a: 1, b: 4, c: 5 }

賦值后原本的target也發(fā)生了變化，并且b的值變?yōu)?
因此在實(shí)際項(xiàng)目中，我們?yōu)榱瞬桓淖冊磳ο?。一般會把目?biāo)對象傳為{}

Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。第一參數(shù)即為目標(biāo)對象。

• 如果目標(biāo)對象與源對象有同名屬性，則后面的屬性會覆蓋前面的屬性
• 如果只有一個參數(shù)，則直接返回該參數(shù)。即Object.assign(obj) === obj
• 如果第一個參數(shù)不是對象，而是基本數(shù)據(jù)類型（Null、Undefined除外），則會調(diào)用對應(yīng)的基本包裝類型
• 如果第一個參數(shù)是Null和Undefined，則會報錯；如果Null和Undefined不是位于第一個參數(shù)，則會略過該參數(shù)的復(fù)制

  let o1 = { a: 0 , b: { c: 0}};
  let o2 = Object.assign({}, o1);
  console.log(JSON.stringify(o2)); // { a: 0, b: { c: 0}}

  o1.a = 1;
  console.log(JSON.stringify(o1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(o2)); // { a: 0, b: { c: 0}}

  o2.b.c = 3;
  console.log(JSON.stringify(o1)); // { a: 1, b: { c: 3}}//c屬性也發(fā)生了改變
  console.log(JSON.stringify(o2)); // { a: 1, b: { c: 3}}

Object.assign 不會跳過那些值為 null 或 undefined 的源對象。

場景如下：

o1 = {a:1, b:null }
o2 = Object.assign(o1, {a:2,b:3} ); 	//{a: 2, b: 3}

因此一定要檢查后端返回的數(shù)據(jù)里，有沒有屬性值為 null或者 undefined，null 和undefined 禁止出現(xiàn)在正常的數(shù)據(jù)格式中