从发布-订阅模式到Vue响应系统思考

[Hibop]

目录提要

发布-订阅（观察者）模式：What-How-Why
实现一个EventBus
Vue中发布-订阅模式的实践
- 响应式原理（源码）
- Vue的事件机理

什么是发布订阅模式

发布-订阅模式也叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在 javascript 开发中,我们一般用事件模型来替代传统的发布-订阅模式.

使用场合：
当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式

为什么使用观察者模式——优缺点

优点：
支持简单的广播通信，自动通知所有已经订阅过的对象；
页面载入后发布者很容易与订阅者存在一种动态关联，增加了灵活性；
发布者与订阅者之间的抽象耦合关系能够单独扩展以及重用。

不足:
创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中；
虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。

Vue内部观察者模式—Vue响应式原理

主要搞清楚Vue源码封装的几个类： Observer、Dep、Watcher等

• Observer: 数据劫持、监听变化
• Dep: 初始化依赖收集（subs 收集订阅者），更新通知订阅者（notify）；
• Watcher: 订阅者，解析属性表达式和变化时触发callback，收集依赖(addDep(), newDeps []), 被$watch(), 和指令消费使用（意译自源码注释）

可以展开每个监听后的响应数据上__ob__属性

浏览器原生事件 —— 自定义事件

参考

1. https://segmentfault.com/a/1190000013338801