建站
咨詢
售后
建站咨詢
新聞中心
場景
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
a: 1,
b: 2,
c: 3,
};
observe(data);
const updateComponent = () => {
console.log(data.a + data.b);
};
new Watcher(updateComponent);
const updateComponent2 = () => {
console.log(data.c);
};
new Watcher(updateComponent2);
data.a = 2;
data.a = 3;
data.b = 4;
data.c = 5;new Watcher(updateComponent) 進行依賴收集會輸出一次 3 ，new Watcher(updateComponent2) 進行依賴收集也會輸出一次 3 。
良慶網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站設計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。
之后我們依次改變 a、 a 、b、c 的值，每改變一次就會觸發(fā) Watcher 的執(zhí)行，會連續(xù)進行四次的 console.log。
試想一下如果這里的 console.log 是渲染頁面，那改變一次值就刷新一下頁面，會造成嚴重的性能問題，頁面也會不停的改變。
解決方案
我們可以通過一個隊列，收集所有的 Watcher 。
那什么時候執(zhí)行 Watcher 隊列呢?
為了等所有的 Watcher 都收集完畢，可以將 Watcher 的執(zhí)行放到 setTimeout 中。這樣當主線程全部執(zhí)行后，才會去執(zhí)行 Watcher 隊列。
代碼實現(xiàn)
我們可以給每一個 Watcher 加上一個 id，如果隊列中已經(jīng)有 id 了就不加入隊列。
let uid = 0;
export default class Watcher {
constructor(Fn, options) {
this.getter = Fn;
this.depIds = new Set(); // 擁有 has 函數(shù)可以判斷是否存在某個 id
this.deps = [];
this.newDeps = []; // 記錄新一次的依賴
this.newDepIds = new Set();
/******新增 *************************/
this.id = ++uid; // uid for batching
// options
if (options) {
this.sync = !!options.sync;
}
/************************************/
this.get();
}
...
}
我們同時提供了一個 options 對象，保存了其中的 sync 字段，表示是像之前一樣立即出觸發(fā) Watcher 還是放到隊列中。
然后 Watcher 的 update 方法中我們?nèi)フ{用加入隊列的函數(shù)。
export default class Watcher {
...
update() {
if (this.sync) {
this.run(); // 直接運行
} else {
queueWatcher(this); // 加入隊列
}
}
...
}看一下 queueWatcher 的實現(xiàn)。
const queue = []; // 保存 Watcher 隊列
let has = {}; // 去重 Watcher
let waiting = false; // 是否加入到了 setTimeout 隊列
export function queueWatcher(watcher) {
const id = watcher.id;
if (has[id] == null) {
has[id] = true;
queue.push(watcher); // 加入隊列
// queue the flush
if (!waiting) { // 執(zhí)行 Watcher 函數(shù)放到 setTimeout 隊列中，只加入一次即可
waiting = true;
setTimeout(flushSchedulerQueue, 0);
}
}
}
再看一下上邊執(zhí)行 Watcher 隊列的 flushSchedulerQueue 函數(shù)的實現(xiàn)。
let flushing = false; // 是否正在執(zhí)行隊列
let index = 0;
/**
* Flush both queues and run the watchers.
*/
function flushSchedulerQueue() {
flushing = true;
let watcher, id;
for (index = 0; index < queue.length; index++) {
watcher = queue[index];
id = watcher.id;
has[id] = null;
watcher.run();
}
resetSchedulerState(); // 執(zhí)行結束后進行重置
}
/**
* Reset the scheduler's state.
*/
function resetSchedulerState() {
index = queue.length = 0;
has = {};
waiting = flushing = false;
}
總體上就是上邊的樣子了。
執(zhí)行結果
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
a: 1,
b: 2,
c: 3,
};
observe(data);
const updateComponent = () => {
console.log(data.a + data.b);
};
new Watcher(updateComponent);
const updateComponent2 = () => {
console.log(data.c);
};
new Watcher(updateComponent2);
data.a = 2;
data.a = 3;
data.b = 4;
data.c = 5;雖然后邊我們改變了四次 data 中的值，但事實上只有兩個 Watcher ，因此只會輸出兩次。
總結
通過異步的一個隊列，當所有 Watcher 收集完畢后統(tǒng)一執(zhí)行，進行了性能方面的優(yōu)化。
本文名稱：Vue2剝絲抽繭-響應式系統(tǒng)之異步隊列
地址分享：http://www.dlmjj.cn/article/dpppdch.html
