案例重現
看下面的乙個例子
data()
this.info = m
this.info.attr1 = 8
console.log(m)
這是vue的部分**，我們猜測m會輸出什麼，你會驚奇的發現m會和this.info繫結，也就是對this.info.attr1的修改，會導致m的值變化，控制台輸出的結果是：
attr1: 8
attr2: "20"
attr3: "30"
深拷貝vs淺拷貝
深拷貝：b複製了a，當修改a時，b沒有發生變話
淺拷貝：b複製了a,當修改a時，b跟著發生了變化。
那麼為何會有深拷貝和淺拷貝的出現呢？原因就是為了節省記憶體空間，淺拷貝就是我們的兩份資料指向了同乙個記憶體位址，當乙個變數修改了記憶體裡面的值之後，另乙個變數讀取的時候就會發現這個變化，這就是淺拷貝，它大大節省了記憶體空間。
如果賦值的時候，不是簡單的修改指標指向，而是重新建立乙個記憶體區域，那麼顯然兩個變數之間就沒有任何關係了，這個時候就是深拷貝。
解決辦法
如何將淺拷貝轉換為深拷貝？簡單的辦法就是使用js的提供的json.parse(json.stringify()) ;
經過這樣的賦值，就是深拷貝，不會修改原變數。
總結其實這個深淺拷貝不是vue的問題，是js本身就存在的問題，只不過在vue中，我們習慣了資料繫結，導致這個問題被放大了。
所以平時對於資料物件的複製，還是需要考慮一下深淺拷貝的問題的。
vue物件深拷貝 vue 深拷貝學習
關於vue中json.parse json.stringify 使用深拷貝問題 一般我們單獨用json.parse 或json.stringify 今天在學vue看到json.parse json.stringify 的用法，這裡研究一下 首先分別說下他們的用法 json.parse 是將字串中的物...
Vue資料深拷貝方法
vue 專案 父元件向子元件傳遞資料，子元件採用el form 對資料進行繫結，因為資料繫結是雙向的，對資料 進行更改後，造成了其他依賴資料的元件顯示不正確的情況，所以考慮對資料進行深拷貝，方法如下 function judgetype obj if obj instanceof element r...
物件深拷貝
最近在專案中用到了物件拷貝這一塊，而且用到的是物件的深拷貝。下面就讓我們來看一下關於物件的拷貝 淺拷貝和深拷貝。先看一下深拷貝和淺拷貝的區別 概念 js 中的淺拷貝與深拷貝，只是針對複雜資料型別 object，array 的複製問題。淺拷貝與深拷貝都可以實現在已有物件上再生出乙份的作用。但是物件的例...