vue数据修改不同步更新的问题解决方案

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