离职了，把 2019 年在公司写的文档 copy 出来。年头有点久，可能写的不太对，也不是很想改了~
注：本文档对应 mobx 版本为 4.15.4、mobx-vue 版本为 2.0.10
写在前面
简易demo 代码如下：
然后我们在执行前打印一下这个 Store 的实例：
结合上面几部分的源码分析，@observable 的变量和 @computed 的变量会在 $mobx 也就是 那个统管整个 mobx 的 ObservableObjectAdministration 实例的 values 上，而在 reaction 里面声明的 Reaction，会在相关 ObservableValue 的 observers 下面。比如这个例子，value 变化需要通知三个东西，一个是视图的重新渲染，一个是 computed 变量的计算、一个是 Reaction 的执行：
而 squared 下面的 observers 只有一个重新渲染视图的 Reaction
源码解析
1. 修改变量 this.value++
根据 @observers 的源码，当 @observable 变量被改变时，会触发 set 函数
set(v) {
this.$mobx.write(this, propName, v)
}
2. ObservableObjectAdministration.write
write(owner: any, key: string, newValue) {
const instance = this.target
if (process.env.NODE_ENV === "production" && instance !== owner) {
this.illegalAccess(owner, key)
}
const observable = this.values[key]
if (observable instanceof ComputedValue) {
observable.set(newValue)
return
}
// intercept
if (hasInterceptors(this)) {
const change = interceptChange<IObjectWillChange>(this, {
type: "update",
object: instance,
name: key,
newValue
})
if (!change) return
newValue = (change as any).newValue
}
newValue = (observable as any).prepareNewValue(newValue)
// notify spy & observers
if (newValue !== globalState.UNCHANGED) {
const notify = hasListeners(this)
const notifySpy = isSpyEnabled()
const change =
notify || notifySpy
? {
type: "update",
object: instance,
oldValue: (observable as any).value,
name: key,
newValue
}
: null
if (notifySpy) spyReportStart({ ...change, name: this.name, key })
;(observable as ObservableValue<any>).setNewValue(newValue)
if (notify) notifyListeners(this, change)
if (notifySpy) spyReportEnd()
}
}
3. observable.setNewValue
这里看的是 @observable number 也就是 observableValue 的对应操作，话说还有直接改变 computedValue 的时候？@computed 不是都是 get 的只读属性？
setNewValue(newValue: T) {
const oldValue = this.value
this.value = newValue
this.reportChanged()
if (hasListeners(this)) {
notifyListeners(this, {
type: "update",
object: this,
newValue,
oldValue
})
}
}
observable 继承自 Atom，所以 reportChanged 是 Atom 的成员函数
4. Atom.reportChanged
public reportChanged() {
startBatch()
propagateChanged(this)
endBatch()
}
5. propagateChanged
function propagateChanged(observable: IObservable) {
if (observable.lowestObserverState === IDerivationState.STALE) return
observable.lowestObserverState = IDerivationState.STALE
const observers = observable.observers
let i = observers.length
while (i--) {
const d = observers[i]
if (d.dependenciesState === IDerivationState.UP_TO_DATE) {
if (d.isTracing !== TraceMode.NONE) {
logTraceInfo(d, observable)
}
d.onBecomeStale()
}
d.dependenciesState = IDerivationState.STALE
}
}
此时 observers 就是上述截图 log 里面那三个：
ComputedValue 和 Reaction 的 onBecomStale 有些不同，源码分别为：
// ComputedValue
onBecomeStale() {
propagateMaybeChanged(this)
}
function propagateMaybeChanged(observable: IObservable) {
// invariantLOS(observable, "maybe start");
if (observable.lowestObserverState !== IDerivationState.UP_TO_DATE) return
observable.lowestObserverState = IDerivationState.POSSIBLY_STALE
const observers = observable.observers
let i = observers.length
while (i--) {
const d = observers[i]
if (d.dependenciesState === IDerivationState.UP_TO_DATE) {
d.dependenciesState = IDerivationState.POSSIBLY_STALE
if (d.isTracing !== TraceMode.NONE) {
logTraceInfo(d, observable)
}
d.onBecomeStale()
}
}
}
// Reaction
onBecomeStale() {
this.schedule()
}
// 这里的逻辑和 action事务特性那一节的逻辑重叠了，就不再过了
schedule() {
if (!this._isScheduled) {
this._isScheduled = true
globalState.pendingReactions.push(this)
runReactions()
}
}
结论
前半段，派发更新的流程都是一样的，到了 propagateChanged的时候，Reaction 和 ComputedValue 发生了分歧：
Reaction 的就比较直接，大致就是 action 事务特性那一节里面讲的，塞 pendingReactions，然后再一个一个执行掉。
ComputedValue 则是套了一层，看看在 ComputedValue 上的 observers 里有哪些 IDerivation，这个 demo 里只有一个更新视图的 Reaction。然后和 Vue 一样， 重复的多余操作会被滤除，比如这个更新视图的操作。实际的计算属性回调，因为没有像 Reaction 那样的 schedule 操作，不会在 runReactions 的阶段被触发，而是在 Vue 的 render 之后以 get 的形式被执行。
