Vue3 源码瞎看 2——reactivity 浅析

前言

感觉 reactivity 代码比较少，看看能不能一篇写个大概。
一般这种响应式的套路，都是 reactive、observable、observe 、observer 之类的名字，vue2x 中相应逻辑的关键字也差不多：defineReactive + observe + new Observer

先说结论

如果用尽可能少的文字来描述 reactive 的工作流程，就是：

1. 定义 Proxy
2. mount 过程中触发 get，进而触发 track
3. 通过 effect 方法设置 activeEffect
4. 绑定当前 dep（依赖） 和 activeEffect
5. 数据更新的时候触发 set，找到 dep，并触发与其绑定的 effect

对比 2x 版本的详细流程

1. init 过程中定义 dep
2. init 过程中调用 defineProperty
3. beforeMount 到 mounted 之间创建 watcher
4. 第一次执行 watcher 的 getter 渲染视图
5. 触发 getter，进行 dep 与 Watcher 的绑定
6. 数据更新触发 set，调用收到影响 dep 上的 watcher（例如组件的 render、watch 函数之类的操作）

之所以把结论搬到了前面。。。是因为的 md 可读性略差，接下来去看源码。。。

Proxy

扫了一眼vue-next-master/packages/reactivity/src/reactive.ts，感觉出现频率最高的就是函数 createReactiveObject，但是函数本身并没有被 export ，对外暴露的是（主要就看了 reactive）:

1. reactive
   a. vue 内部：在 collectionHandlers 的 toReactive 和 baseHandlers 的 createGetter 中被调用
   b. 兼容的 data 函数：在 data 函数里面的内容是由该方法进行 Proxy 加工的
   c. 兼容的类+装饰器写法：使用 vue-class-component 直接挂在类里面的变量会通过 proxyRefs （mountComponent => setupComponent => setupStatefulComponent => handleSetupResult => proxyRefs） 进行 Proxy 的加工
   d. 新版 setup 中：可以直接创建 Proxy，然后会走上述 c 的流程，区别就是最后一步不需要再用 Proxy 进行加工，直接把当前的 Proxy return 了出去直接挂在 instance 的 setupState 上
2. shallowReactive
   a. vue 内部：调用时机在 setupComponent 的 initProps 时，会把 vNode 上的 rawProps 变成 Proxy 挂在 instance.props 上
3. readonly
   a. vue 内部：在 collectionHandlers 的 toReadonly 被调用
   b. 对外作为只读加工使用
4. shallowReadonly
   a. vue 内部：调用时机在 setupComponent 的 initProps 之后的 setupStatefulComponent，用于进一步处理 instance.props 和 组件内的 slots

这四个函数，对应封装好的 readonly 状态、handlers 和 collectionHandlers，外部只需要传个 target 进来就可以调用 createReactiveObject 函数，举个例子：

export function reactive(target: T): UnwrapNestedRefs
export function reactive(target: object) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
        return target
    }
    return createReactiveObject(
        target,
        false,
        mutableHandlers,
        mutableCollectionHandlers
    )
}

然后看下 createReactiveObject 的源码：

function createReactiveObject(
    target: Target,
    isReadonly: boolean,
    baseHandlers: ProxyHandler,
    collectionHandlers: ProxyHandler
) {
    if (!isObject(target)) {
        if (__DEV__) {
            console.warn(`value cannot be made reactive: ${String(target)}`)
        }
        return target
    }
    // target is already a Proxy, return it.
    // exception: calling readonly() on a reactive object
    if (
        target[ReactiveFlags.RAW] &&
        !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
    ) {
        return target
    }
    // target already has corresponding Proxy
    const proxyMap = isReadonly ? readonlyMap : reactiveMap
    const existingProxy = proxyMap.get(target)
    if (existingProxy) {
        return existingProxy
    }
    // only a whitelist of value types can be observed.
    const targetType = getTargetType(target)
    if (targetType === TargetType.INVALID) {
        return target
    }
    const proxy = new Proxy(
        target,
        targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
    )
    proxyMap.set(target, proxy)
    return proxy
}

官方的注释已经很清晰了，再强行描述一下流程就是：

1. 判断是不是对象，非对象无法处理成响应式
2. 判断是不是已经是一个 Proxy
3. 判断 readOnly 状态，去相应的 Map 找是否已存在对应的 Proxy
4. 判断是不是非法类型
5. 在 Map 中存储 Proxy，并 return 出去

看完了取代 defineProperty 的 Proxy，还需要找到 2x 版本的依赖收集和派发更新对应的逻辑

依赖收集

依赖收集就是 vue 去收集在改变的时候需要触发视图更新的变量

在 2 版本，是在 defineProperty 之前创建了对应的 Dep 实例，然后在变量 get 的时候把 Dep 和 Watcher 建立联系

先只看看最常用的 reactive 的实现逻辑吧：
createReactiveObject 最后两个入参 baseHandlers 与 collectionHandlers，直接读起来 collectionHandlers 就是我们想找的逻辑，而 reactive 函数传入的则是 mutableCollectionHandlers。

但是在 createReactiveObject 里两个 handlers 的使用逻辑，是基于 target 的 targetType 来判断的，代码如下：

function getTargetType(value: Target) {
    return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) // ReactiveFlags.SKIP 就是 "__v_skip"
        ? TargetType.INVALID
        : targetTypeMap(toRawType(value))
}

function targetTypeMap(rawType: string) {
    switch (rawType) {
        case 'Object':
        case 'Array':
            return TargetType.COMMON // 1
        case 'Map':
        case 'Set':
        case 'WeakMap':
        case 'WeakSet':
            return TargetType.COLLECTION // 2
        default:
            return TargetType.INVALID // 0
    }
}

// ...
const targetType = getTargetType(target)
// ...
const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)

然后你就发现我们应该需要去看的是 baseHandlers 对应的 mutableHandlers

export const mutableHandlers: ProxyHandler