Vue3 - 源码

vue3响应式原理

解读

• 参考链接 (opens new window)

手写

let currentEffect;
class Dep {
    constructor() {
        this.effects = new Set();  // 依赖收集集合，用set防止重复收集
    }
    // 依赖收集
    depend() {
        if(currentEffect) this.effects.add(currentEffect);
    }
    // 派发更新
    notice() {
        this.effects.forEach(effect => {
            effect()
        })
    }
}
// 建立键与dep的一一对应关系
let targetMap = new Map();
function getDep(target, key) {
    let depsMap = targetMap.get(target);
    if(!depsMap) {
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }
    let dep = depsMap.get(key);
    if(!dep){
        dep = new Dep();
        depsMap.set(key, dep);
    }
    return dep;
}
// 响应式
function reactivity(obj) {
    return new Proxy(obj, {
        get(target, key){
            const dep = getDep((target, key));
        //    依赖收集
            dep.depend();
            return Reflect.get(target, key);
        },
        set(target, key, newVal) {
            const dep = getDep(target, key);
            const ret = Reflect.set(target, key, newVal);
            // 设置值之后再去触发更新
            dep.notice();
            return ret;
        }
    })
}
// 监听变化
function effectWatch(effect) {
    currentEffect = effect;
    effect();  // 第一次先执行一次
    currentEffect = null
}

// test
let obj = reactivity({
    count: 1
})
let b;
effectWatch(() => {
    b = obj.count + 1;
    console.log(b);
})
obj.count = 2;
obj.count = 3;