Vue2 响应式原理

咱们常常用vue的双向绑定，改变data的某个属性值，vue就立刻帮咱们自动更新视图，下面咱们看看原理。

Object的响应式原理：

 

能够看到，其实核心就是把object的全部属性都加上getter、setter，get时收集依赖，set时通知依赖，达到响应式更新的目的。

可是显而易见的，这种方法没法监测到data增长属性和删除属性的动做

Array的响应式原理：

 

能够看到array的原理和object相似，可是由于大多数状况下都不是set，而是一些操做数组的方法(push、pull、shift...)，因此咱们加了一层拦截器去通知Dep。

而array里面的元素若是是object类型的话，就跟上面object类型同样转Observer来实现响应式

可是这样设计的缺陷也显而易见，就是直接修改元素(array[0]=123)、直接操做array.length这样的操做，vue是没法监听到的。

 

为了把上面提到的缺陷修补，vue3会用proxy来重写observer。