vue3响应式原理

May 6, 2024

vue

前文

参考：《Vue.js设计与实现》，Vue.js 源码实现 @vue/reactivity

如何理解响应式系统？参考 Vue.js 官方文档：《深入响应式系统》

对于何谓响应式，借助 signals 这一概念可能有助于理解。（如 Angular Solid Preact。参见这个响应式对比）

目前 stage1 的这篇 proposal 已经对 Signals 做了细致的研究和比较严格的定义，也包括很多相关解释性引用，本问就不重复引用了。

简单来说：“signal” 是状态管理的最小单元，用于存储和更新状态，并可以订阅其状态变更。

下面我们实现一个最精简的 signals，可以发现这里的核心是发布订阅机制。

signal.ts

class Signal<T> extends EventTarget {
    #value: T;
    constructor(value: T) {
        super();
        this.#value = value;
    }

    get value(): T {
        return this.#value;
    }

    set value(value: T) {
        if (Object.is(value, this.#value)) return;
        this.#value = value;
        this.dispatchEvent(new CustomEvent("change"));
    }

    effect(fn: VoidFunction) {
        fn();
        this.addEventListener("change", fn);
        return () => this.removeEventListener("change", fn);
    }
}

const signal = <T>(val: T) => new Signal(val);

class Computed<T> extends Signal<T> {
    // 注意这个简单实现中需要手动指明依赖。下面我们会知道 vue 是如何实现自动追踪依赖的
    constructor(fn: (...deps: Signal<any>[]) => T, deps: Signal<any>[]) {
        super(fn(...deps)); // 注意这里立即执行一次，得到初始值
        for (const dep of deps) {
            if (!(dep instanceof Signal)) continue;
            dep.addEventListener("change", () => {
                this.value = fn(...deps);
            });
        }
    }
}

const computed = <T>(fn: (...deps: Signal<any>[]) => T, deps: Signal<any>[]) => new Computed(fn, deps);

这个简单示例可以这样使用：

const name = signal("Jane");
const surname = signal("Doe");
const fullName = computed(() => `${name} ${surname}`, [name, surname]);

fullName.effect(() => console.log(fullName.value));
// -> Jane Doe

name.value = "John";
// -> John Doe

作为 vue 的用户，我们会发现 vue 的响应式系统默认是深响应的（ref/reactive），可以看作是 signals 用 Proxy 包装的递归版本。

基于对象的基本响应式系统

应当注意 Vue.js 对 TypeScript 具有完善的支持，下面的代码虽然使用 TypeScript 编写，但仅做类型示意

// 存储副作用函数的桶
const bucket = new WeakMap<typeof data, Map<keyof typeof data, Set<EffectFunction>>>();

// 原始数据
const data = {
    foo: 1,
    bar: 2,
    // this key is for computed()
    value: undefined,
};

// 对原始数据的代理
export const obj = new Proxy(data, {
    // 拦截读取操作
    get(target, key) {
        // 将副作用函数 activeEffect 添加到存储副作用函数的桶中
        track(target, key as keyof typeof data);
        // 返回属性值
        return Reflect.get(target, key);
    },
    // 拦截设置操作
    set(target, key, newVal) {
        // 设置属性值
        Reflect.set(target, key, newVal);
        // 把副作用函数从桶里取出并执行
        trigger(target, key as keyof typeof data);
        return true;
    },
});

// effect 副作用函数内部需要触发代理对象 get 操作
// 注意：这个实现是缺陷的，因为如果在副作用函数内部只是读取代理对象本身，那么并不会被 track
function track(target: typeof data, key: keyof typeof data) {
    if (!activeEffect) return;
    let depsMap = bucket.get(target);
    if (!depsMap) {
        bucket.set(target, (depsMap = new Map()));
    }
    // 当前 key 关联的所有副作用
    let deps: Set<EffectFunction> | undefined = depsMap.get(key);
    if (!deps) {
        depsMap.set(key, (deps = new Set()));
    }
    deps.add(activeEffect);
    // 保持包装后的副作用函数，其持有其对应 key 的所有副作用函数集合
    // 用于实现重建依赖关系（之后会有 cleanup 逻辑）
    activeEffect.deps.push(deps);
}

// set
function trigger(target: typeof data, key: keyof typeof data) {
    const depsMap = bucket.get(target);
    if (!depsMap) return;
    // 指定 key 的所有 effects
    const effects: Set<EffectFunction<void>> | undefined = depsMap.get(key);

    const effectsToRun = new Set<EffectFunction>();
    effects?.forEach((effectFn) => {
        // 如果副作用是由于在副作用函数内部触发 set 导致的，则忽略（防止无限循环）
        if (effectFn !== activeEffect) {
            effectsToRun.add(effectFn);
        }
    });
    effectsToRun.forEach((effectFn) => {
        if (effectFn.options?.scheduler) {
            effectFn.options.scheduler(effectFn);
        } else {
            effectFn();
        }
    });
    // effects?.forEach(effectFn => effectFn())
}

interface EffectFunction<Returns = void> {
    /** 包装后的副作用函数 */
    (): Returns;
    /** 对应 options */
    options?: {
        lazy?: boolean;
        scheduler?: (fn: VoidFunction) => void;
    };
    /** 与该副作用函数相关的依赖集合 */
    deps: Set<EffectFunction>[];
}

// 用一个全局变量存储当前激活的 effect 函数
let activeEffect: EffectFunction;
// effect 栈
const effectStack: EffectFunction[] = [];

// 注意，除非指定 options.lazy 为 true，否则副作用函数将立即（通过可选的 options.scheduler）执行一次
export function effect<T>(fn: () => T /* 要注册的副作用函数 */, options: EffectFunction<T>["options"] = {}) {
    // 实际包装后的副作用函数，包装函数的附加功能是：
    // 生成 effect 嵌套栈（允许 effect 嵌套），并保持 activeEffect 指向当前激活的 effect 函数
    const effectFn: EffectFunction<T> = () => {
        // 清理依赖，依赖是包含当前副作用的所有 key 关联的所有副作用集合
        for (const deps of effectFn.deps) {
            deps.delete(effectFn);
        }
        effectFn.deps = []; // 重置，之后将通过 track 函数重建依赖
        /**
         * 清理工作实现下面的代码不会造成无意义的副作用函数执行
         * effect(() => {
         *     document.body.innerText = obj.ok ? obj.text : 'not'
         * })
         * obj.ok = false
         * 副作用终将导致 track() 函数被调用，track 函数通过 Set 重建依赖（因此无需去重操作）
         */

        // 当调用 effect 注册副作用函数时，将副作用函数复制给 activeEffect
        activeEffect = effectFn;
        // 在调用副作用函数之前将当前副作用函数压栈
        effectStack.push(effectFn);
        const res = fn();
        // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并还原 activeEffect 为之前的值
        effectStack.pop();
        activeEffect = effectStack.at(-1)!;

        return res;
    };
    // 将 options 挂在到 effectFn 上
    effectFn.options = options;
    // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合
    effectFn.deps = [];
    // 执行副作用函数
    if (!options.lazy) {
        effectFn(); // 副作用函数内部需要触发 set 操作，导致调用 track 函数
    }

    return effectFn;
}

// =========================

export function computed<T>(getter: () => T) {
    let value: T;
    let dirty = true;

    const effectFn = effect(getter, {
        lazy: true,
        scheduler() {
            if (!dirty) {
                dirty = true;
                trigger(obj as any, "value");
            }
        },
    });

    const obj = {
        get value() {
            if (dirty) {
                value = effectFn();
                dirty = false;
            }
            track(obj as any, "value");
            return value;
        },
    };

    return obj;
}

// =========================

function traverse(value: Record<keyof any, any>, seen = new Set()) {
    if (typeof value !== "object" || value === null || seen.has(value)) return;
    seen.add(value);
    for (const k in value) {
        traverse(value[k], seen);
    }

    return value;
}

export function watch<
    Source = Record<keyof any, any> /* the proxied data */,
    Getter = () => Source /* getter returning the key of proxied data */,
>(
    source: Source | Getter,
    cb: (oldValue?: Source, newValue?: Source, onInvalidate?: (fn: VoidFunction) => void) => VoidFunction,
    options: { immediate?: boolean; flush?: "pre" | "post" } = {},
) {
    let getter: Getter;
    if (typeof source === "function") {
        getter = source as Getter;
    } else {
        getter = (() => traverse(source as any)) as Getter;
    }

    let oldValue: Source, newValue: Source;

    let cleanup: VoidFunction;
    function onInvalidate(fn: VoidFunction) {
        cleanup = fn;
    }

    const job = () => {
        newValue = effectFn();
        if (cleanup) {
            cleanup();
        }
        cb(oldValue, newValue, onInvalidate);
        oldValue = newValue;
    };

    const effectFn = effect(
        // 执行 getter
        () => (getter as () => Source)(),
        {
            lazy: true,
            scheduler: () => {
                if (options.flush === "post") {
                    const p = Promise.resolve();
                    p.then(job);
                } else {
                    job();
                }
            },
        },
    );

    if (options.immediate) {
        job();
    } else {
        oldValue = effectFn();
    }
}

实现对语言内置对象的响应式

语言内置对象包括：Array, Map, WeakMap, Set, WeakSet

/**
 * 为了简单起见，下面的类型是不完整的，特别是一些嵌套对象，注意分辨
 */

// 存储副作用函数的桶
const bucket = new WeakMap<object, Map<keyof any, Set<EffectFunction>>>();
const ITERATE_KEY: keyof any = Symbol(); // 虚拟的对象键，用于关联 for...in 副作用

const reactiveMap = new Map<object, any>();

export function reactive<T extends object>(obj: T): T /** vue中的实际类型是 UnwrapNestedRefs<T> */ {
    const proxy = createReactive(obj);

    const existionProxy = reactiveMap.get(obj);
    if (existionProxy) return existionProxy;

    reactiveMap.set(obj, proxy);
    return proxy;
}

export declare const ShallowReactiveMarker: unique symbol; // 注意：类似这样的symbol键仅为类型系统使用，并不会产生运行时开销
export function shallowReactive<T extends object>(obj: T): T & { [ShallowReactiveMarker]?: true } {
    return createReactive(obj, true);
}

export function readonly<T extends object>(
    obj: T,
): Readonly<T> /** vue中的实际类型是 DeepReadonly<UnwrapNestedRefs<T>> */ {
    return createReactive(obj, false, true);
}

export function shallowReadonly<T extends object>(obj: T): Readonly<T> /** vue中的实际类型是 Readonly<T> */ {
    return createReactive(obj, true, true);
}

const arrayInstrumentations: Record<string, Function> = {};

(["includes", "indexOf", "lastIndexOf"] as const).forEach((method) => {
    const originMethod = Array.prototype[method] as Function;
    arrayInstrumentations[method] = function (...args: any[]) {
        // this 是代理对象，先在代理对象中查找，将结果存储到 res 中
        let res = originMethod.apply(this, args);

        if (res === false) {
            // res 为 false 说明没找到，在通过 this.RAW 拿到原始数组，再去原始数组中查找，并更新 res 值
            res = originMethod.apply(this.RAW, args);
        }
        // 返回最终的结果
        return res;
    };
});

let shouldTrack = true;
(["push"] as const).forEach((method) => {
    const originMethod = Array.prototype[method];
    arrayInstrumentations[method] = function (...args: any[]) {
        shouldTrack = false;
        let res = originMethod.apply(this, args);
        shouldTrack = true;
        return res;
    };
});

const RAW: unique symbol = Symbol();
function createReactive<T extends object>(obj: T, isShallow = false, isReadonly = false) {
    return new Proxy(obj, {
        // 拦截读取操作
        get(target, key, receiver) {
            console.log("get: ", key);
            if (key === RAW) {
                // 代理对象使用一个特殊的 RAW 键访问原始对象
                return target;
            }

            if (Array.isArray(target) && arrayInstrumentations.hasOwnProperty(key)) {
                return Reflect.get(arrayInstrumentations, key, receiver);
            }

            // 非只读的时候才需要建立响应联系
            if (!isReadonly && typeof key !== "symbol") {
                track(target, key);
            }

            const res = Reflect.get(target, key, receiver);

            if (isShallow) {
                return res;
            }

            if (typeof res === "object" && res !== null) {
                // 深只读/响应
                return isReadonly ? readonly(res) : reactive(res);
            }

            return res;
        },
        // 拦截设置操作
        set(target, key, newVal, receiver) {
            console.log("set: ", key);
            if (isReadonly) {
                console.warn(`属性 ${String(key)} 是只读的`);
                return true;
            }
            const oldVal = target[key as keyof T];
            // 对 trigger 函数标记当前 set 操作是新增还是修改，实现正确处理 for...in （只遍历对象键）副作用
            // 注：如果只是修改某个对象值，那么对象的键集合实际上没有变更，因此不需要触发副作用
            // 如果属性不存在，则说明是在添加新的属性，否则是设置已存在的属性
            const type = Array.isArray(target)
                ? // 如果代理目标是数组，则检测被设置的索引值是否小于数组长度
                  Number(key) < target.length
                    ? // 如果是，则视作 SET 操作，否则是 ADD 操作
                      "SET"
                    : "ADD"
                : Object.prototype.hasOwnProperty.call(target, key)
                  ? "SET"
                  : "ADD";
            // 设置属性值
            const res = Reflect.set(target, key, newVal, receiver);
            if (target === receiver.RAW) {
                if (oldVal !== newVal && (oldVal === oldVal || newVal === newVal)) {
                    trigger(target, key, type, newVal);
                }
            }

            return res;
        },
        has(target, key) {
            track(target, key);
            return Reflect.has(target, key);
        },
        ownKeys(target) {
            // ownKeys 处理函数实现正确绑定代理对象的与对象键相关副作用
            console.log("ownkeys: ");
            track(target, Array.isArray(target) ? "length" : ITERATE_KEY);
            return Reflect.ownKeys(target);
        },
        deleteProperty(target, key) {
            if (isReadonly) {
                console.warn(`属性 ${String(key)} 是只读的`);
                return true;
            }
            const hadKey = Object.prototype.hasOwnProperty.call(target, key);
            const res = Reflect.deleteProperty(target, key);

            if (res && hadKey) {
                trigger(target, key, "DELETE");
            }

            return res;
        },
    });
}

function track(target: object, key: keyof any) {
    if (!activeEffect || !shouldTrack) return;
    let depsMap = bucket.get(target);
    if (!depsMap) {
        bucket.set(target, (depsMap = new Map()));
    }
    let deps = depsMap.get(key);
    if (!deps) {
        depsMap.set(key, (deps = new Set()));
    }
    deps.add(activeEffect);
    activeEffect.deps.push(deps);
}

function trigger(target: object, key: keyof any, type: "ADD" | "DELETE" | "SET", newVal?: any) {
    console.log("trigger", key);
    const depsMap = bucket.get(target);
    if (!depsMap) return;
    const effects = depsMap.get(key);

    const effectsToRun = new Set<EffectFunction>();
    effects?.forEach((effectFn) => {
        if (effectFn !== activeEffect) {
            effectsToRun.add(effectFn);
        }
    });

    if (type === "ADD" || type === "DELETE") {
        const iterateEffects = depsMap.get(ITERATE_KEY);
        iterateEffects?.forEach((effectFn) => {
            if (effectFn !== activeEffect) {
                effectsToRun.add(effectFn);
            }
        });
    }

    // 当操作类型为 ADD 并且目标对象是数组时，应该取出并执行那些与 length 属性相关联的副作用函数
    if (type === "ADD" && Array.isArray(target)) {
        const lengthEffects = depsMap.get("length");
        lengthEffects?.forEach((effectFn) => {
            if (effectFn !== activeEffect) {
                effectsToRun.add(effectFn);
            }
        });
    }

    // 如果操作目标是数组，并且修改了数组的 length 属性
    if (Array.isArray(target) && key === "length") {
        // 对于索引大于或等于新的 length 值的元素，需要把所有相关联的副作用函数取出并添加到 effectsToRun 中待执行
        depsMap.forEach((effects, key) => {
            if ((key as number) >= newVal) {
                effects.forEach((effectFn) => {
                    if (effectFn !== activeEffect) {
                        effectsToRun.add(effectFn);
                    }
                });
            }
        });
    }

    effectsToRun.forEach((effectFn) => {
        if (effectFn.options?.scheduler) {
            effectFn.options.scheduler(effectFn);
        } else {
            effectFn();
        }
    });
}

interface EffectFunction<Returns = void> {
    /** 包装后的副作用函数 */
    (): Returns;
    /** 对应 options */
    options?: {
        lazy?: boolean;
        scheduler?: (fn: VoidFunction) => void;
    };
    /** 与该副作用函数相关的依赖集合 */
    deps: Set<EffectFunction>[];
}

// 用一个全局变量存储当前激活的 effect 函数
let activeEffect: EffectFunction;
// effect 栈
const effectStack: EffectFunction[] = [];

export function effect<T = any>(fn: () => T, options: { lazy?: boolean; scheduler?: (fn: VoidFunction) => void } = {}) {
    const effectFn: EffectFunction = () => {
        cleanup(effectFn);
        // 当调用 effect 注册副作用函数时，将副作用函数复制给 activeEffect
        activeEffect = effectFn;
        // 在调用副作用函数之前将当前副作用函数压栈
        effectStack.push(effectFn);
        const res = fn();
        // 在当前副作用函数执行完毕后，将当前副作用函数弹出栈，并还原 activeEffect 为之前的值
        effectStack.pop();
        activeEffect = effectStack[effectStack.length - 1];

        return res;
    };
    // 将 options 挂在到 effectFn 上
    effectFn.options = options;
    // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合
    effectFn.deps = [];
    // 执行副作用函数
    if (!options.lazy) {
        effectFn();
    }

    return effectFn;
}

function cleanup(effectFn: EffectFunction) {
    // 清理依赖，依赖是包含当前副作用的所有 key 关联的所有副作用集合
    for (const deps of effectFn.deps) {
        deps.delete(effectFn);
    }
    effectFn.deps = []; // 重置，之后将通过 track 函数重建依赖
    /**
     * 清理工作实现下面的代码不会造成无意义的副作用函数执行
     * effect(()=>{
     *     document.body.innerText = obj.ok ? obj.text : 'not'
     * })
     * obj.ok = false
     * 副作用终将导致 track() 函数被调用，track 函数通过 Set 重建依赖（因此无需去重操作）
     */
}

// =================================================================

// const obj = reactive({ foo: 1, bar: 2 });

// const newObj = {
//   ...obj
// }

// effect(() => {
//   console.log(newObj.foo)
// })

// obj.foo = 100

declare const RefSymbol: unique symbol;
export declare const RawSymbol: unique symbol;
export interface Ref<T = any> {
    value: T;
    /**
     * Type differentiator only.
     * We need this to be in public d.ts but don't want it to show up in IDE
     * autocomplete, so we use a private Symbol instead.
     */
    [RefSymbol]: true;
}

export function ref<T = any>(val: T): Ref<T> {
    const wrapper = {
        value: val,
    };
    // 使用 Object.defineProperty 在 wrapper 对象上定义一个不可枚举的属性 __v_isRef，并且值为 true
    Object.defineProperty(wrapper, "__v_isRef", {
        value: true,
    });
    return reactive(wrapper) as Ref<T>;
}

export function toRefs<T extends object>(obj: T) {
    const ret = {} as { [K in keyof T]: Ref<T[K]> };
    for (const key in obj) {
        ret[key] = toRef(obj, key);
    }
    return ret;
}

export function toRef<T extends object, K extends keyof T>(
    obj: T,
    key: K,
): Ref<T[K]> /** vue的实际类型可能是 ToRef<T[K]> */ {
    const wrapper = {
        get value() {
            return obj[key];
        },
        set value(val) {
            obj[key] = val;
        },
    };

    Object.defineProperty(wrapper, "__v_isRef", {
        value: true,
    });

    return wrapper as Ref<T[K]>;
}

export function proxyRefs(target: any) {
    return new Proxy(target, {
        get(target, key, receiver) {
            const value = Reflect.get(target, key, receiver);
            return value.__v_isRef ? value.value : value;
        },
        set(target, key, newValue, receiver) {
            const value = target[key];
            if (value.__v_isRef) {
                value.value = newValue;
                return true;
            }
            return Reflect.set(target, key, newValue, receiver);
        },
    });
}

/*
const newObj = proxyRefs({ ...toRefs(obj) });

console.log(newObj.foo);
console.log(newObj.bar);

newObj.foo = 100;
console.log(newObj.foo);
 */

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

1 Comments

Latest
Oldest
Hottest

匿名2024-07-08

厉害大佬

YieldRay

vue3响应式原理

Preview: