vue3中的響應(yīng)式原理-effect

更新時間：2022年08月12日 17:16:56 作者：只愛喝白開水

這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

effect的基本實現(xiàn)

export let activeEffect = undefined;// 當(dāng)前正在執(zhí)行的effect
class ReactiveEffect {
? ? active = true;
? ? deps = []; // 收集effect中使用到的屬性
? ? parent = undefined;
? ? constructor(public fn) { }
? ? run() {
? ? ? ? if (!this.active) { // 不是激活狀態(tài)
? ? ? ? ? ? return this.fn();
? ? ? ? }
? ? ? ? try {
? ? ? ? ? ? this.parent = activeEffect; // 當(dāng)前的effect就是他的父親
? ? ? ? ? ? activeEffect = this; // 設(shè)置成正在激活的是當(dāng)前effect
? ? ? ? ? ? return this.fn();
? ? ? ? } finally {
? ? ? ? ? ? activeEffect = this.parent; // 執(zhí)行完畢后還原activeEffect
? ? ? ? ? ? this.parent = undefined;
? ? ? ? }
? ? }
}
export function effect(fn, options?) {
? ? const _effect = new ReactiveEffect(fn); // 創(chuàng)建響應(yīng)式effect
? ? _effect.run(); // 讓響應(yīng)式effect默認(rèn)執(zhí)行
}

依賴收集

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(); // 記錄依賴關(guān)系
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，這樣后續(xù)可以用于清理
? ? ? ? }
? ? }
}

將屬性和對應(yīng)的effect維護成映射關(guān)系，后續(xù)屬性變化可以觸發(fā)對應(yīng)的effect函數(shù)重新run

觸發(fā)更新

set(target, key, value, receiver) {
? ? // 等會賦值的時候可以重新觸發(fā)effect執(zhí)行
? ? 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); // 獲取對應(yīng)的映射表
? ? if (!depsMap) {
? ? ? ? return
? ? }
? ? const effects = depsMap.get(key);
? ? effects && effects.forEach(effect => {
? ? ? ? if (effect !== activeEffect) effect.run(); // 防止循環(huán)
? ? })
}

分支切換與cleanup

在渲染時我們要避免副作用函數(shù)產(chǎn)生的遺留

const state = reactive({ flag: true, name: 'jw', age: 30 })
effect(() => { // 副作用函數(shù) (effect執(zhí)行渲染了頁面)
? ? 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; // 當(dāng)前的effect就是他的父親
? ? ? ? ? ? activeEffect = this; // 設(shè)置成正在激活的是當(dāng)前effect
+ ? ? ? ? ? cleanupEffect(this);
? ? ? ? ? ? return this.fn(); // 先清理在運行
? ? ? ? }
? ? }
}

這里要注意的是：觸發(fā)時會進行清理操作（清理effect），在重新進行收集（收集effect）。在循環(huán)過程中會導(dǎo)致死循環(huán)。

let effect = () => {};
let s = new Set([effect])
s.forEach(item=>{s.delete(effect); s.add(effect)}); // 這樣就導(dǎo)致死循環(huán)了

停止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
}

調(diào)度執(zhí)行

trigger觸發(fā)時，我們可以自己決定副作用函數(shù)執(zhí)行的時機、次數(shù)、及執(zhí)行方式

export function effect(fn, options:any = {}) {
? ? const _effect = new ReactiveEffect(fn,options.scheduler); // 創(chuàng)建響應(yīng)式effect
? ? // if(options){
? ? // ? ? Object.assign(_effect,options); // 擴展屬性
? ? // }
? ? _effect.run(); // 讓響應(yīng)式effect默認(rèn)執(zhí)行
? ? 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){ // 如果有調(diào)度函數(shù)則執(zhí)行調(diào)度函數(shù)
? ? ? ? ? ? ? ? ? ? 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;
}

當(dāng)取值時返回的值是對象，則返回這個對象的代理對象，從而實現(xiàn)深度代理