前言

本篇文章代碼思路來自 Vue3.0 源碼, 部分理解來源于霍春陽 《Vue.js設計與實現》這本書的理解, 感興趣的小伙伴可以自行購買閱讀。可以非常明確的感受到作者對 Vue 的深刻理解以及用心, 富含非常全面的 Vue 的知識點, 強烈推薦給大家。

接上文
Vue響應式原理和本質 - 實現一個完善的響應式系統

分支切換與cleanup

前文回顧

在上一篇文章中, 我們實現了一個基本的響應式系統代碼如下, 實現過程可以根據自己的需要進行閱讀, 鏈接給到大家: http://lanan.blog.csdn.net/article/details/134127326。但是目前實現的響應式系統仍然存在一些問題, 本文針對分支切換產生的問題繼續完善響應式系統

// 前文已實現的響應式系統const data = { name: "chenyq", age: 18 };
const bucket = new WeakMap();
const obj = new Proxy(data, {get(target, key) {// 將副作用函數收集到桶中track(target, key);// 返回屬性值return target[key];},set(target, key, newVal) {// 設置屬性值target[key] = newVal;// 從桶中取出副作用函數執行trigger(target, key);},
});function track(target, key) {// 沒有activeEffect, 直接returnif (!activeEffect) return target[key];// 根據target從桶中取出depsMaplet depsMap = bucket.get(target);// 如果depsMap不存在, 那么就需要創建一個depsMap與之關聯if (!depsMap) bucket.set(target, (depsMap = new Map()));// 再根據key, 從depsMap中取出deps, deps是一個Set集合, 里面存放的是與當前key相關的所有副作用函數let deps = depsMap.get(key);// 如果deps不存在, 則創建一個deps, 并將其添加到depsMap中if (!deps) depsMap.set(key, (deps = new Set()));// 最后將當前激活的副作用函數添加到桶里deps.add(activeEffect);
}function trigger(target, key) {// 根據target從桶中取出depsMapconst depsMap = bucket.get(target);if (!depsMap) return;// 取出與key相關的副作用函數const effects = depsMap.get(key);// 執行副作用函數effects && effects.forEach((fn) => fn());
}let activeEffect;
function effect(fn) {activeEffect = fn;fn();
}// 測試部分
// 執行副作用函數, 觸發讀取
effect(() => {document.body.innerText = obj.name;
});// 1秒后對obj.name屬性進行修改
setTimeout(() => {obj.name = "abc";// obj.age = 19;// obj.notExist = "abc";
}, 1000);

分支切換的問題

首先, 我們需要知道分支切換會給我們上面實現的響應式系統帶來哪些問題, 如有下面一段代碼, effectFn 函數內部存在一個三元表達式, 當字段 obj.flag 發生變換時, 代碼所需要執行的分支也會跟隨變化。

const data = { flag: true, text: "分支切換問題" };
const obj = new Proxy(data, { /* ... */ });
function effect(fn) { /* ... */ }effect(function effectFn() {document.body.innerText = obj.flag ? obj.text : "not fount";
});

上面的分支切換會產生遺留的副作用函數, 例如上面代碼中, 當 obj.flag 為 true 的時候, 會讀取 obj.text 屬性的值, 此時就會觸發 flag 和 text 屬性的 get 操作, 對應的會跟蹤 flag 和 text 屬性所依賴的副作用函數 effectFn。如下所示, effectFn 分別被字段 flag 和 text 所對應的依賴集合進行收集:

data└── flag└── effectFn└── text└── effectFn

當我們將 obj.flag 的值修改為 false 時, 會觸發 obj.flag 的 set 操作, 會重新執行 effectFn 函數, 但由于此時 obj.flag 的值為 false , 不會讀取 obj.text 屬性。所以我們期望副作用函數 effectFn 不被 obj.text 對應的依賴集合進行收集, 此時副作用函數 effectFn 與響應式建立的關系如下:

data└── flag└── effectFn

但按照我們目前的實現, 無法做到這一點, 在我們將 obj.flag 修改為 false, 并重新執行了副作用函數 effectFn 后, 它們之間對應的依賴關系任然為之前的樣子, 這也就產生了副作用函數的遺留問題, 這個問題會導致不必要的更新, 如用下面代碼來舉例:

調用 effect 函數會執行一次 effectFn 函數, 打印一次 “effect is running”

const data = { flag: true, text: "分支切換問題" };
const obj = new Proxy(data, { /* ... */ });
function effect(fn) { /* ... */ }effect(function effectFn() {console.log("effect is running");document.body.innerText = obj.flag ? obj.text : "not fount";
});

我們將 obj.flag 修改為 false 后, 會觸發 obj.flag 的 set 操作, 即副作用函數 effectFn 會重新執行, 打印第二次 “effect is running”

setTimeout(() => {obj.flag = false;
}, 1000);

若此時我們繼續修改 obj.text, 可以發現打印了第三次 “effect is running”, 說明 obj.text 對應的依賴集合中, 仍然保留了 effectFn 函數

obj.text = "測試分支切換";

我們想要實現的是, 當 obj.flag 為 false 的時候, 由于此時不在讀取 obj.tex t屬性, 那么該情況下 obj.text 無論如何進行變換, 都不應該重新執行副作用函數 effectFn 。目前的情況就是, obj.flag 為 false 的時候, 只要修改了 obj.text 的值, 就會重新執行副作用函數 effectFn, 歸根結底還是因為副作用函數遺留產生的問題。

依賴集合的收集

其實解決這個問題的思路很簡單, 我們只需要每次執行副作用函數的時候, 把這個副作用函數從所有被關聯的依賴集合中刪除, 比如上文中的建立的對應關系, obj.flag 和 obj.text 都和副作用函數 effectFn 相關聯, 我們就可以在執行副作用函數 effectFn, 將它與 obj.flag 和 obj.text 的關系都斷開, 如下所示:

data└── flag└── text

待副作用函數執行完成之后, 我們再重新建立聯系, 這樣一來新建立的聯系中就不會包含遺留的副作用函數。那么現在的問題就是, 想要將一個副作用函數從所有與之關聯的依賴集合中移除, 我們需要明確的知道哪些依賴集合包含這個副作用函數。這樣的話我們就需要對 effect 函數進行重新設計, 我們在 effect 函數中, 定義一個新的函數 effectFn, 將定義的 effectFn 函數設置為當前激活的副作用函數, 并為這個 effectFn 函數添加 deps 屬性, deps 屬性為一個數組, 數組中存放當前副作用函數的依賴集合, 代碼如下所示:

let activeEffect;
function effect(fn) {// 定義一個effectFn函數const effectFn = () => {// 將定義的effectFn函數設置為當前激活的副作用函數activeEffect = effectFn;fn();};// deps屬性中用來存儲所有與該副作用函數相關聯的依賴集合effectFn.deps = [];effectFn();
}

那么我們只需要在 track 函數中, 將當前副作用函數的依賴集合添加到 effectFn.deps 數組中, 就可以完成副作用函數相關聯的依賴集合的收集, 如下代碼所示:

function track(target, key) {if (!activeEffect) return target[key];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數組中activeEffect.deps.push(deps)
}

cleanup的實現

有了上面的依賴集合收集之后, 我們就可以做到每次在副作用函數執行時, 根據 effectFn.deps , 將副作用函數從所有依賴集合中移除:

let activeEffect;
function effect(fn) {const effectFn = () => {// 調用cleanup函數完成清除cleanup(effectFn)activeEffect = effectFn;fn();};effectFn.deps = [];effectFn();
}

cleanup 函數接收一個副作用函數作為參數, 遍歷 effectFn.deps 數組, 數組中每一項都是一個依賴集合, 依次從每一個依賴集合中將副作用函數 effectFn 移除, 實現代碼如下所示:

function cleanup(effectFn) {// 遍歷effectFn.deps數組const length = effectFn.deps.length;for (let i = 0; i < length; i++) {// 取出依賴集合const deps = effectFn.deps[i];// 將副作用函數從依賴集合中移除deps.delete(effectFn);}// 將effectFn.deps重置為空數組effectFn.deps.length = 0;
}

完成上面操作, 我們的響應式系統就已經可以避免副作用函數的遺留問題了, 但是上面代碼運行會出現一個無限循環, 導致死循環的原因就出現在 trigger 函數中:

function trigger(target, key) {const depsMap = bucket.get(target);if (!depsMap) return;const effects = depsMap.get(key);effects && effects.forEach((fn) => fn()); // 這行代碼有問題
}

我們來分析一下問題的原因, 在 trigger 內部, 我們遍歷的 effects, 它是一個 Set 集合, 里面存儲著副作用函數; 我們遍歷這個 Set 集合時, 會取出每一個副作用函數進行執行, 在執行副作用函數時會調用 cleanup 函數進行清除, 會將這個副作用函數從 Set 集合中移除; 但是我們繼續執行函數, 會導致它又重新被收集到 Set 集合當中, 而此時 Set 集合遍歷任在進行。

語言規范中對此有明確的說明: 在調用 forEach 遍歷 Set 集合時, 如果一個值已經被訪問過了, 但該值被刪除并重新添加到集合, 如果此時 forEach 遍歷沒有結束, 那么該值會重新被訪問。

例如下面代碼, Set 集合當中只有一個元素, 在遍歷時我們將這個元素先刪除, 再添加; 那么該值就會被重新訪問, 進而這個循環就會無限執行進行下去:

const set = new Set([1])set.forEach(item => {set.delete(1)set.add(1)
})

因此 trigger 中的代碼同理, 也會無限的執行下去。解決辦法很簡單, 我們可以構造另外一個 Set 集合并遍歷它, 這樣就不會無限的執行下去了。具體做法: 由于我們將副作用函數移除和添加的函數是 effects, 那么我們就不要直接遍歷 effects, 創建一個新的集合 effectsToRun 代替直接遍歷 effects, 代碼如下所示:

function trigger(target, key) {const depsMap = bucket.get(target);if (!depsMap) return;const effects = depsMap.get(key);// 創建一個新的Set集合用來遍歷const effectsToRun = new Set(effects)// 執行副作用函數effectsToRun.forEach(effectFn => effectFn())
}

完整的代碼展示

到這里我們就徹底解決了副作用函數產生遺留的問題, 到這里我們實現的響應式系統的完整代碼給到大家:

const data = { flag: true, text: "分支切換問題" };
const bucket = new WeakMap();
const obj = new Proxy(data, {get(target, key) {// 將副作用函數收集到桶中track(target, key);// 返回屬性值return target[key];},set(target, key, newVal) {// 設置屬性值target[key] = newVal;// 從桶中取出副作用函數執行trigger(target, key);},
});// 依賴收集
function track(target, key) {// 沒有activeEffect, 直接returnif (!activeEffect) return target[key];// 根據target從桶中取出depsMaplet depsMap = bucket.get(target);// 如果depsMap不存在, 那么就需要創建一個depsMap與之關聯if (!depsMap) bucket.set(target, (depsMap = new Map()));// 再根據key, 從depsMap中取出deps, deps是一個Set集合, 里面存放的是與當前key相關的所有副作用函數let deps = depsMap.get(key);// 如果deps不存在, 則創建一個deps, 并將其添加到depsMap中if (!deps) depsMap.set(key, (deps = new Set()));// 最后將當前激活的副作用函數添加到桶里deps.add(activeEffect);// 將依賴集合收集到activeEffect.deps數組中activeEffect.deps.push(deps);
}// 派發更新
function trigger(target, key) {// 根據target從桶中取出depsMapconst depsMap = bucket.get(target);if (!depsMap) return;// 取出與key相關的副作用函數const effects = depsMap.get(key);// 創建一個新的Set集合用來遍歷const effectsToRun = new Set(effects);// 執行副作用函數effectsToRun.forEach((effectFn) => effectFn());
}let activeEffect;
function effect(fn) {// 定義一個effectFn函數const effectFn = () => {// 調用cleanup函數完成清除cleanup(effectFn);// 將定義的effectFn函數設置為當前激活的副作用函數activeEffect = effectFn;fn();};// deps屬性中用來存儲所有與該副作用函數相關聯的依賴集合effectFn.deps = [];effectFn();
}// 清除依賴
function cleanup(effectFn) {// 遍歷effectFn.deps數組const length = effectFn.deps.length;for (let i = 0; i < length; i++) {// 取出依賴集合const deps = effectFn.deps[i];// 將副作用函數從依賴集合中移除deps.delete(effectFn);}// 將effectFn.deps重置為空數組effectFn.deps.length = 0;
}// 測試部分
// 執行副作用函數, 觸發讀取
effect(function effectFn() {console.log("effect is running");document.body.innerText = obj.flag ? obj.text : "not fount";
});// 1秒后對obj.name屬性進行修改
setTimeout(() => {obj.flag = false;obj.text = "測試分支切換";
}, 1000);