浅析从vue源码看观察者模式(4)

日期：2020-05-11 栏目：程序人生浏览：次

上述代码中，我删除了一些与目前探讨无关的代码，如果需要进行详细研究的，可以自行查阅 vue2.5.3 版本的源码。

现在再去看 Dep 和 Watcher，我们需要知道两个点

Dep 负责收集所有的订阅者 Watcher ，具体谁不用管，具体有多少也不用管，只需要通过 target 指向的计算去收集订阅其消息的 Watcher 即可，然后只需要做好消息发布 notify 即可。
Watcher 负责订阅 Dep ，并在订阅的时候让 Dep 进行收集，接收到 Dep 发布的消息时，做好其 update 操作即可。

两者看似相互依赖，实则却保证了其独立性，保证了模块的单一性。

更多的应用

vue 还有一些地方用到了"万能"的观察者模式，比如我们熟知的组件之间的事件传递，$on 以及 $emit 的设计。

$emit 负责发布消息，并对订阅者 $on 做统一消费，即执行 cbs 里面所有的事件。

Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
 const vm: Component = this
 if (Array.isArray(event)) {
  for (let i = 0, l = event.length; i < l; i++) {
   this.$on(event[i], fn)
  }
 } else {
  (vm._events[event] || (vm._events[event] = [])).push(fn)
 }
 return vm
}

Vue.prototype.$emit = function (event: string): Component {
 const vm: Component = this
 let cbs = vm._events[event]
 if (cbs) {
  cbs = cbs.length > 1 ? toArray(cbs) : cbs
  const args = toArray(arguments, 1)
  for (let i = 0, l = cbs.length; i < l; i++) {
   cbs[i].apply(vm, args)
  }
 }
 return vm
}

总结

本文探讨了观察者模式的基本概念、适用场景，以及在 vue 源码中的具体应用。这一节将总结一下观察者模式的一些优缺点

目标和观察者间的抽象耦合：一个目标只知道他有一系列的观察者（目标进行依赖收集），却不知道其中任意一个观察者属于哪一个具体的类，这样目标与观察者之间的耦合是抽象的和最小的。
支持广播通信：观察者里面的通信，不像其它通常的一些请求需要指定它的接受者。通知将会自动广播给所有已订阅该目标对象的相关对象，即上文中的 dep.notify() 。当然，目标对象并不关心到底有多少对象对自己感兴趣，它唯一的职责就是通知它的各位观察者，处理还是忽略一个通知取决于观察者本身。
一些意外的更新：因为一个观察者它自己并不知道其它观察者的存在，它可能对改变目标的最终代价一无所知。如果观察者直接在目标上做操作的话，可能会引起一系列对观察者以及依赖于这些观察者的那些对象的更新，所以一般我们会把一些操作放在目标内部，防止出现上述的问题。

OK，本文到这就差不多了，更多的源码设计思路细节将在同系列的其它文章中进行一一解读。

浅析从vue源码看观察者模式(4)

相关推荐