Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger

概览

在BaseReactiveHandler类的get方法中，有如下代码块if (!isReadonly2){track(target, "get", key);}，这表示通过reactive、shallowReactive创建的响应式对象，非只读的，当读取代理对象proxyTarget的某个属性key时，都会被该get方法拦截，即调用track()方法建立依赖。

而当对代理对象proxyTarget进行赋值或更新某个属性的值时，会被set方法拦截，即调用trigger()方法触发依赖（而删除会被deleteProperty拦截）。

因此对于reactive响应式对象的响应式处理，和track与trigger方法密不可分。

本文主要介绍track与trigger是如何进行依赖的收集与触发的全流程。

源码分析

在vue3中，维护了一个全局的targetMap WeakMap实例对象，用于存储响应式对象与依赖的映射关系。

js 复制代码

const targetMap = new WeakMap();

`track`方法

track方法收集依赖就是往变量targetMap中添加相关元素，存储响应式对象与依赖的映射关系。

track的源码实现如下：

js 复制代码

function track(target, type, key) {
    if (shouldTrack && activeSub) {
        let depsMap = targetMap.get(target);
        if (!depsMap) {
            targetMap.set(target, depsMap = new Map());
        }
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, dep = new Dep());
            dep.map = depsMap;
            dep.key = key;
        }
        dep.track();
    }
}

这里暂且不论shouldTrack和activeSub，假定满足track的条件。首先从targetMap中读取depsMap，若depsMap中不存在，则创建一个新的Map的实例，并将其赋值给depsMap，并且存储到targetMap中。然后从depsMap中获取key对应的依赖关系dep，同理，若dep不存在，则创建一个新的Dep实例，并将其赋值给dep，并且存储到depsMap中，然后将dep的map和key分别绑定depsMap、key。最后调用dep.track()方法。

dep.track()执行后，会将当前的activeSub添加到dep的subs数组中。

`trigger`方法

track方法的源码实现如下：

js 复制代码

function trigger(target, type, key, newValue, oldValue, oldTarget) {
    const depsMap = targetMap.get(target);
    if (!depsMap) {
        globalVersion++;
        return;
    }
    const run = (dep) => {
        if (dep) {
            dep.trigger();
        }
    };
    startBatch();
    if (type === "clear") {
        depsMap.forEach(run);
    } else {
        const targetIsArray = isArray(target);
        const isArrayIndex = targetIsArray && isIntegerKey(key);
        if (targetIsArray && key === "length") {
            const newLength = Number(newValue);
            depsMap.forEach((dep, key2) => {
                if (key2 === "length" || key2 === ARRAY_ITERATE_KEY || !isSymbol(key2) && key2 >= newLength) {
                    run(dep);
                }
            });
        } else {
            if (key !== void 0 || depsMap.has(void 0)) {
                run(depsMap.get(key));
            }
            if (isArrayIndex) {
                run(depsMap.get(ARRAY_ITERATE_KEY));
            }
            switch (type) {
                case "add":
                    if (!targetIsArray) {
                        run(depsMap.get(ITERATE_KEY));
                        if (isMap(target)) {
                            run(depsMap.get(MAP_KEY_ITERATE_KEY));
                        }
                    } else if (isArrayIndex) {
                        run(depsMap.get("length"));
                    }
                    break;
                case "delete":
                    if (!targetIsArray) {
                        run(depsMap.get(ITERATE_KEY));
                        if (isMap(target)) {
                            run(depsMap.get(MAP_KEY_ITERATE_KEY));
                        }
                    }
                    break;
                case "set":
                    if (isMap(target)) {
                        run(depsMap.get(ITERATE_KEY));
                    }
                    break;
            }
        }
    }
    endBatch();
}

trigger方法在响应式数据发生变化后会被触发，vue3会先判断全局响应式集合对象targetMap中是否存在依赖对象depsMap，即是否有被追踪依赖，若不存在，则将globalVersion加1 ，然后直接返回，没有下一步；定义run方法；调用startBatch方法，表示要进行批处理。判断type是否clear，是，则遍历依赖对象depsMap，执行run方法；否则判断target是否是数组，以及key是否数组的索引，然后根据type和key取出响应式数据对应的具体依赖，调用run方法；最后调用endBatch方法。

Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger

概览

源码分析

track方法

trigger方法

`track`方法

`trigger`方法