Vue 响应式原理

Vue中的响应式数据是通过Object.defineProperty()方法，将属性全部转换成getter/setter 的，通过这样来实现响应式数据，但是由于Object.defineProperty()的特性，其不能够向对象中新添加的数据中设置getter/setter。那么如何动态添加数据的属性呢？

1.对于对象数据：

　　Vue无法检测到对象属性的添加和删除

　　对于添加可通过

Vue.set(this.someObject,’b’,2);
This.$set(this.someObect,’b’,2);

 　对于删除可以通过

Vue.delete(this.someObject,’b’);
This.$delete(this.someObject,’b’);

 

2.对于数组数据：

　　Vue对列表的限制：当对数组修改的时候通过索引的时候，以及修改数组的长度的时候；vue无法检测到数据的变换

　　以及在对使用一些方法的时候，这些方法不修改原数组的时候。

　　对于数组的添加可以通过：

Vue.set(this.items,indexOfitem,newValue);
This.$set(This.items,indexOfItem,newValue);

 　　对于数组的删除：

This.item.splite(indexOfItem,newValue);

 

如何在mutation中调用vue，mutation中的this指向的是Vuex ,并不是vue.但是可以利用参数传递的方法，通过在调用的时候，将当前的上下文环境作为参数传递，可以实现在store中使用vue实例