vue3中的響應式原理-effect

2022-08-12 22:00:20

effect的基本實現

export let activeEffect = undefined;// 當前正在執行的effect
class ReactiveEffect {
    active = true;
    deps = []; // 收集effect中使用到的屬性
    parent = undefined;
    constructor(public fn) { }
    run() {
        if (!this.active) { // 不是啟用狀態
            return this.fn();
        }
        try {
            this.parent = activeEffect; // 當前的effect就是他的父親
            activeEffect = this; // 設定成正在啟用的是當前effect
            return this.fn();
        } finally {
            activeEffect = this.parent; // 執行完畢後還原activeEffect
            this.parent = undefined;
        }
    }
}
export function effect(fn, options?) {
    const _effect = new ReactiveEffect(fn); // 建立響應式effect
    _effect.run(); // 讓響應式effect預設執行
}

依賴收集

get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
        return true;
    }
    const res = Reflect.get(target, key, receiver);
    track(target, 'get', key);  // 依賴收集
    return res;
}

const targetMap = new WeakMap(); // 記錄依賴關係
export function track(target, type, key) {
    if (activeEffect) {
        let depsMap = targetMap.get(target); // {物件：map}
        if (!depsMap) {
            targetMap.set(target, (depsMap = new Map()))
        }
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, (dep = new Set())) // {物件：{ 屬性 :[ dep, dep ]}}
        }
        let shouldTrack = !dep.has(activeEffect)
        if (shouldTrack) {
            dep.add(activeEffect);
            activeEffect.deps.push(dep); // 讓effect記住dep，這樣後續可以用於清理
        }
    }
}

將屬性和對應的effect維護成對映關係，後續屬性變化可以觸發對應的effect函數重新run

觸發更新

set(target, key, value, receiver) {
    // 等會賦值的時候可以重新觸發effect執行
    let oldValue = target[key]
    const result = Reflect.set(target, key, value, receiver);
    if (oldValue !== value) {
        trigger(target, 'set', key, value, oldValue)
    }
    return result;
}

export function trigger(target, type, key?, newValue?, oldValue?) {
    const depsMap = targetMap.get(target); // 獲取對應的對映表
    if (!depsMap) {
        return
    }
    const effects = depsMap.get(key);
    effects && effects.forEach(effect => {
        if (effect !== activeEffect) effect.run(); // 防止迴圈
    })
}

分支切換與cleanup

在渲染時我們要避免副作用函數產生的遺留

const state = reactive({ flag: true, name: 'jw', age: 30 })
effect(() => { // 副作用函數 (effect執行渲染了頁面)
    console.log('render')
    document.body.innerHTML = state.flag ? state.name : state.age
});
setTimeout(() => {
    state.flag = false;
    setTimeout(() => {
        console.log('修改name，原則上不更新')
        state.name = 'zf'
    }, 1000);
}, 1000)

function cleanupEffect(effect) {
    const { deps } = effect; // 清理effect
    for (let i = 0; i < deps.length; i++) {
        deps[i].delete(effect);
    }
    effect.deps.length = 0;
}
class ReactiveEffect {
    active = true;
    deps = []; // 收集effect中使用到的屬性
    parent = undefined;
    constructor(public fn) { }
    run() {
        try {
            this.parent = activeEffect; // 當前的effect就是他的父親
            activeEffect = this; // 設定成正在啟用的是當前effect
+           cleanupEffect(this);
            return this.fn(); // 先清理在執行
        }
    }
}

這裡要注意的是：觸發時會進行清理操作（清理effect），在重新進行收集（收集effect）。在迴圈過程中會導致死迴圈。

let effect = () => {};
let s = new Set([effect])
s.forEach(item=>{s.delete(effect); s.add(effect)}); // 這樣就導致死迴圈了

停止effect

export class ReactiveEffect {
    stop(){
        if(this.active){ 
            cleanupEffect(this);
            this.active = false
        }
    }
}
export function effect(fn, options?) {
    const _effect = new ReactiveEffect(fn); 
    _effect.run();
    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner; // 返回runner
}

排程執行

trigger觸發時，我們可以自己決定副作用函數執行的時機、次數、及執行方式

export function effect(fn, options:any = {}) {
    const _effect = new ReactiveEffect(fn,options.scheduler); // 建立響應式effect
    // if(options){
    //     Object.assign(_effect,options); // 擴充套件屬性
    // }
    _effect.run(); // 讓響應式effect預設執行
    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner; // 返回runner
}
export function trigger(target, type, key?, newValue?, oldValue?) {
    const depsMap = targetMap.get(target);
    if (!depsMap) {
        return
    }
    let effects = depsMap.get(key);
    if (effects) {
        effects = new Set(effects);
        for (const effect of effects) {
            if (effect !== activeEffect) { 
                if(effect.scheduler){ // 如果有排程函數則執行排程函數
                    effect.scheduler()
                }else{
                    effect.run(); 
                }
            }
        }
    }
}

深度代理

get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
        return true;
    }
    // 等會誰來取值就做依賴收集
    const res = Reflect.get(target, key, receiver);
    track(target, 'get', key);
    if(isObject(res)){
        return reactive(res);
    }
    return res;
}

當取值時返回的值是物件，則返回這個物件的代理物件，從而實現深度代理