在进行mini-vue的开发学习后,对于reactive数据跟effect绑定的实现基本已经通透,复杂的功能背后其实一般都是依赖于更基础的实现。因此特别写下这个最小版本的reactive功能,以此提供一个给其他想了解的新手一个参考过程。
由于Vue中实现大都是考虑到更自动化,并且有对于数据的一个递归监听,因此多出了很多看起来不好理解的代码,但是实际上将这些代码简化,剩余核心实现(并不是说只有这部分最重要,而是大部分的实现都是依赖于此)代码不过堪堪几十行。
虽然最终完成的代码量很低,但是其实基本上做到了effect的自动依赖收集,即为state数据初次加载的时候自动将effect加入到自己的effect列表里。
在使用上,实现了react风格(其实更接近solid风格)的api方式,即为返回一个getter,一个setter。还实现了类Vue的ref风格api,不过没有对属性进行深层次的监听,因为深层次的监听大概率是必须使用Proxy
,而Proxy的兼容性好像并不是很好。若不使用Proxy则必须大量的使用Object.defineProperty
,这样就会陷入跟Vue2相同的困境里,因此直接采用了更直接的单向数据流,手动去触发一个更新。