离职了，把 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 的形式被执行。