30 行代码的响应式实现

示例代码

const deps = [];

const ref = (value) => {
    const reactiveObj = {};
    let valueCache = value;

    Object.defineProperty(reactiveObj, "value", {
        get() {
            if (window.currentRunFunc) {
                deps.push(window.currentRunFunc);
            }
            return valueCache;
        },
        set(newVal) {
            valueCache = newVal;
            deps.forEach((func) => {
                func();
            });
        },
    });

    return reactiveObj;
};

const effect = (func) => {
    window.currentRunFunc = func;
    func();
    window.currentRunFunc = null;
};

测试代码

const refNum = ref([1, 2, 3]);

const getSum = () => {
    const sum = refNum.value.reduce((accu, curr) => accu + curr, 0);
    console.log("sum", sum);
    return sum;
};

effect(getSum);

setTimeout(() => {
    refNum.value = [...refNum.value, 4];
}, 2000);