深入理解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原理的文章。

猜你喜欢

转载自blog.csdn.net/qq_37195804/article/details/107351179