深入理解vue核心设计模式

从今天听了大圣老师的课，感觉vue2到vue3的整体设计思路上还是没有变化的，依旧是通过建立一个被观察的对象，通过get方法收集依赖，set方法派发的方式去建立核心的“响应式”。

这个设计模式我也看过不少文章，被称为订阅-发布设计模式确实更合理，在vue2的架构中，我们把核心的设计模式分为Observer，Dep，Watcher，Observer被称为观察者，观察着我们的数据，Dep为数据分配中心，收集数据和通知数据更新，Watcher作为订阅者，收集每个被订阅的对象，就比如我们vue中常见的{{value}}，这就是一个订阅对象，每当发现一个需要被订阅的对象，就往对应Dep中新增一个Watcher类，这就是收集依赖的过程，而当value的值发生改变时，观察者就会告诉Dep，让Dep通知所有的Watcher进行数据更新，这就是所谓的数据响应式。

再举个更简单的例子，当老板往内部系统发送一条公告时，我和我的同事都会在内部系统收到一条这条公告。注意:我们不是Watcher，而是当我们登录了这个内部系统，就创建了一个Watcher来关联我和内部系统。

再看vue3的reactive实现方法，当我看到源码直接用一个WeakMap关联了被观测对象，关联数据，关键数据所相应的队列。其结构为{关联数据(作为observer被观测的对象为键值):{关联数据:所收集的依赖队列}}，这就直接把Observer和Watcher给废除了，这也太牛了！具体可以看我的另一篇实现一个小Reactive原理的文章。