問題:
點擊el-table表格一行數據中的編輯按鈕,將點擊的這一行數據顯示在對話框的表單里,表單里的數據一修改,無論對話框是點保存還是取消,表格的數據都變了
原因:
是由於將表格那行數據 row 賦值給表單對象 this.sellDialogForm 造成的。
row是對象,this.sellDialogForm 也是對象,這是對象給對象賦值,對象屬於引用數據類型。
基本數據類型賦值時賦的是‘值’,賦值后的兩個變量之間並不會相互影響;
而引用數據類型(Object,Array)賦值時賦的是 ‘地址’ ,即賦值后兩個變量引用的是棧中相同的一個內存地址,兩變量之間會相互影響,其中一個變量的數據改變,另一個的數據也會跟着變。
賦值、淺拷貝和深拷貝的異同:
引用數據類型(Object/Array) | 復制的數據是否和原數據相同 | 是否和原數據指向同一個對象 | 第一層數據類型為基本數據類型 | 原數據中有子對象 |
賦值:const obj2 = obj1; | 是 | 是 | 改變會讓原數據一起改變 | 改變會讓原數據一起改變 |
淺拷貝:const obj2 = Object.assign({},obj1); | 是 | 否 | 改變不會讓原數據一起改變 | 改變會讓原數據一起改變 |
深拷貝:const obj2 = JSON.parse(JSON.stringify(obj1)); | 是 | 否 | 改變不會讓原數據一起改變 | 改變不會讓原數據一起改變 |
JSON.parse(JSON.stringify())深拷貝原理: 通過JSON.stringify將對象轉成JSON字符串,再通過JSON.parse()把JSON字符串解析成對象,這樣新的對象就產生了,而且對象會開辟新的棧,實現深拷貝。
解決:
這里只需要用到對象第一層的基本數據類型,所以可以通過使用淺拷貝 Object.assign({}, obj) 解決;
也可以用深拷貝 JSON.parse(JSON.stringify(obj)) 。