哈喽~~~
最近在复习一些常见的设计模式,联想到vue的响应式原理(2.x),决定整理一篇浅显易懂的文章阐述其核心思想。
ok,让我们开始。
发布订阅模式基于一个主题事件通道,接收通知的对象可以通过自定义的事件订阅主题,对象会在主题事件发布时收到通知。
说到发布订阅模式,不得不提观察者模式,两者都是维护事件与依赖该事件的对象之间的关系,在有关状态发生变更时会执行相应的更新,所以也经常有人将两者混为一谈,其实两者的差异也十分明显,在发布订阅模式中事件统一由调度中心处理,且可以基于不同的主题去执行不同的事件,实现了完全的解耦,更加灵活多变。
let pubSub = { subscribers: {}, subscribe(key, fn) { if (!this.subscribers[key]) this.subscribers[key] = []; this.subscribers[key].push(fn); }, unSubscribe(key) { delete this.subscribers[key]; }, publish(key, ...args) { let listeners = this.subscribers[key]; listeners.forEach(fn => fn(...args)); // 通知所有订阅者 } }; /* 为简化代码,省去了一些错误边界的处理,调试: pubSub.subscribe('event', () => { console.log('first event'); }); pubSub.subscribe('event', () => { console.log('second event'); }); pubSub.publish('event'); // first event second event */ 复制代码
看到这你大概明白了,发布订阅模式就是通过在事件调度中心(subscribers)添加订阅者的事件(subscribe),等到发布事件(publish)时执行相应的事件就可以了,接下来,我们看看vue是如何一步步实现响应式系统。
👆是vue官网下载的一张图,用来描述vue是如何通过收集的依赖,在data变更的时候触发通知变更的过程。现在看上去还是有点抽象,下面我们从源码的角度梳理主要的几个步骤对其进行一些拆分。
// vue/src/core/observer/index.js const dep = new Dep() // 实例化依赖管理器 ---- 下面会介绍 function defineReactive (obj,key,val) { // 将对象转化成可观察对象 if (arguments.length === 2) { val = obj[key] } Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { dep.depend() // 每个data的属性都会有一个dep对象,用来进行收集依赖 return value }, set: function reactiveSetter (newVal) { if(val === newVal){ return; } val = newVal; dep.notify() // 通知依赖更新 } }) } // vue/src/core/observer/dep.js class Dep { // 订阅者Dep 用来存放Watcher观察者对象 也被称为依赖管理器 static target: ?Watcher; subs: Array<Watcher>; depend () { if (Dep.target) { Dep.target.addDep(this) // 添加一个Watcher对象 } } addSub (sub) { this.subs.push(sub) } notify () { const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() // 通知所有Watcher对象更新视图 } } } 复制代码
// vue/src/core/observer/watcher.js (以下为简化的代码片段) export default class Watcher { constructor (vm,expOrFn,cb) { this.vm = vm; this.cb = cb; this.getter = parsePath(expOrFn) // 这个函数会调用组件的render函数来更新虚拟DOM this.value = this.get() } get () { Dep.target = this // 将当前的Watcher赋值给了Dep.target const vm = this.vm let value = this.getter.call(vm, vm) // 调用组件的更新函数 Dep.target = undefined return value } addDep (dep) { dep.addSub(this) // 将Watcher对象注册到该属性的Dep中 --- 依赖收集 } update () { // 接收到变更时执行更新 const oldValue = this.value this.value = this.get() this.cb.call(this.vm, this.value, oldValue) } } 复制代码
拆分完成,如果还有不清楚的地方,那下面这张图形象的解释了Watcher、Dep和Observer三者之间的关系,结合之前对源码的分析,可以看到Observe扮演的角色是发布者,对对象的每一个属性进行数据监听,Watcher是连接组件和data的桥梁,Dep则扮演是一个收集依赖和管理通知更新的调度中心。
(Tips: 笔者认为弄明白这几个概念对于理解响应式原理非常重要,在此基础上阅读源码效果也会好的多。)
本文介绍了发布订阅模式的原理和简单实现,并根据流程梳理简述了vue响应式原理的核心思想,文章不长,希望对你有所帮助。
时间仓促,文中肯定会有一些不够严谨的地方,欢迎大家指正和讨论。
最后,感谢阅读!