Vue2 響應式系統之非同步佇列

2022-04-12 22:00:17

場景

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 。

之後我們依次改變 a、 a 、b、c 的值，每改變一次就會觸發 Watcher 的執行，會連續進行四次的 console.log。

試想一下如果這裡的 console.log 是渲染頁面，那改變一次值就重新整理一下頁面，會造成嚴重的效能問題，頁面也會不停的改變。

解決方案

我們可以通過一個佇列，收集所有的 Watcher 。

那什麼時候執行 Watcher 佇列呢?

為了等所有的 Watcher 都收集完畢，可以將 Watcher 的執行放到 setTimeout 中。這樣當主執行緒全部執行後，才會去執行 Watcher 佇列。

程式碼實現

我們可以給每一個 Watcher 加上一個 id，如果佇列中已經有 id 了就不加入佇列。

let uid = 0;

export default class Watcher {
    constructor(Fn, options) {
        this.getter = Fn;
        this.depIds = new Set(); // 擁有 has 函數可以判斷是否存在某個 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 欄位，表示是像之前一樣立即出觸發 Watcher 還是放到佇列中。

然後 Watcher 的 update 方法中我們去呼叫加入佇列的函數。

export default class Watcher {
    ...
    update() {
        if (this.sync) {
            this.run(); // 直接執行
        } else {
            queueWatcher(this); // 加入佇列
        }
    }
    ...
}

看一下 queueWatcher 的實現。

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) { // 執行 Watcher 函數放到 setTimeout 佇列中，只加入一次即可
            waiting = true;
            setTimeout(flushSchedulerQueue, 0);
        }
    }
}

再看一下上邊執行 Watcher 佇列的 flushSchedulerQueue 函數的實現。

let flushing = false; // 是否正在執行佇列
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(); // 執行結束後進行重置
}

/**
 * Reset the scheduler's state.
 */
function resetSchedulerState() {
    index = queue.length = 0;
    has = {};
    waiting = flushing = false;
}

總體上就是上邊的樣子了。

執行結果

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 收集完畢後統一執行，進行了效能方面的優化。

到此這篇關於Vue2 響應式系統之非同步佇列的文章就介紹到這了,更多相關Vue2 非同步佇列內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue2 響應式系統之非同步佇列

目錄

場景

解決方案

程式碼實現

執行結果

總結

熱門文章