发布/订阅模式、 观察者模式在Vue中的应用场景

发布/订阅模式和观察者模式通常被混为一谈，但它们在Vue中有着不同的应用场景。

发布/订阅模式核心：

• 订阅者
• 发布者
• 信号中心(事件中心)

我们假定：存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”一个信号，其它任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候可以开始执行，这就是发布/订阅模式

发布/订阅模式在Vue中的应用场景：子组件与父组件的通信方式、兄弟组件通信

---

观察者模式核心：

• 观察者(Watcher): 每个观察者必须有一个 update() 方法，当事件发生时，执行观察者的update()。观察者可以理解为发布/订阅模式的订阅者。

• 目标(Dependency依赖)：可以理解为发布/订阅模式的发布者

观察者模式在Vue中应用场景：数据实时更新视图：

官方文档：

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

官方图示：

如何理解：

• Vue组件的data并非所有属性都会收集为依赖，而是被模板引用的属性才会收集为依赖，比如< div >{{ msg }}< /div>
• 当渲染模板时,msg将会触发getter函数，即收集依赖的地点就是在getter中。
• 在某种情况下对msg进行了重新赋值，那么将会触发setter函数，既然msg改变了，那么视图就要更新了，即通知更新的地点在setter中
• 如何通知更新？在setter中使用dep的notify方法通知Watcher，即调用观察者的update方法，使得组件重新渲染。