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。

原文地址:https://www.cnblogs.com/amiezhang/p/11279774.html