場景：

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

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>

后臺返回數據為row，通過Object.assign進行拷貝

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

原因：

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

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

而后臺返回的數據中沒有selectValue屬性，如下

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

解決：

• 拷貝時加上初始化時的數據格式

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>

淺拷貝和深拷貝

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

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

Object.assign()實現淺復制。

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

場景如下：

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) 

這時會發現當label為1時，this.second的值也被改寫成與this.first相同的數據

文檔中的例子

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也發生了變化，并且b的值變為5
因此在實際項目中，我們為了不改變源對象。一般會把目標對象傳為{}

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

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

  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屬性也發生了改變
  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}

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