最近在做一個組件封裝的功能，用到父組件將數組(this.DataSource,this.DefaultItem)傳到給子組件，子組件接受該數組來進行添加數組和刪除數組的操作。因為子組件無法直接修改父組件傳過來的值，聯想到vue利用雙向綁定的特點，因此我在子組件中定義2個數組，
data () {
leftData: this.DataSource,
rightData:this.DefaultItem
},
想達到一個效果就是我修改子組件的leftData 和 rightData 從而 修改到 父組件的this.DataSource和this.DefaultItem
如下部分代碼：
this.rightData = this.rightData.concat(this.leftData[this.left]);
this.leftData.splice(this.left, 1);
然后我就發現，rightData的雖然賦值上去了，但是並沒有改變到DefaultItem，但是DataSource的值卻因為leftData的改變而改變了。
針對這一怪異現象，花了一些時間追溯問題本源，就是數據的修改沒有同步，然后對這方面進行一番百度，終於明白了道理。
首先vue包含一組觀察數組的變異方法，調用這些方法就可以觸發視圖的更新，或者說數據的修改吧。
push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
其次vue由於javascript的限制，不能夠直接檢測到給數組賦值，也不能對該數組進行長度的賦值。
弄清楚這一道理之后，后面的問題也就好解決了，那就是我可以用push來向rightData添加數據。
this.rightData.push(this.leftData[this.left]);
此時再debugger發現rightData的值的修改同時修改到了DefaultItem。
以上其中this.left是我傳入的索引。