最近在做一个组件封装的功能，用到父组件将数组(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是我传入的索引。