Vue2 響應式系統之分支切換

2022-04-13 04:00:28

場景

我們考慮一下下邊的程式碼會輸出什麼。

import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
    text: "hello, world",
    ok: true,
};
observe(data);

const updateComponent = () => {
    console.log("收到", data.ok ? data.text : "not");
};

new Watcher(updateComponent); // updateComponent 執行一次函數，輸出 hello, world

data.ok = false; // updateComponent 執行一次函數，輸出 not

data.text = "hello, liang"; // updateComponent 會執行嗎？

我們來一步一步理清：

observer(data)

攔截了中和的，並且各自初始化了一個範例，用來儲存依賴它們的物件。datatextokget、setDepWatcher

new Watcher(updateComponent)

這一步會執行函數，執行過程中用到的所有物件屬性，會將收集到相應物件屬性中的中。updateComponentWatcherDep

當然這裡的其實是同一個，所以用了指向的箭頭。Watcher

data.ok = false

這一步會觸發，從而執行中所有的，此時就會執行一次。setDepWatcherupdateComponent

執行就會重新讀取中的屬性，觸發，然後繼續收集。updateComponentdatagetWatcher

重新執行函數的時候：updateComponent

const updateComponent = () =&gt; {
    console.log("收到", data.ok ? data.text : "not");
};

因為的值變為，所以就不會觸發的，的就不會變化了。data.okfalsedata.textgettextDep

而會繼續執行，觸發收集，但由於我們中使用的是陣列，此時收集到的兩個其實是同一個，這裡是有問題，會導致重複執行，一會兒我們來解決下。data.okgetWatcherDepWacherupdateComponent

data.text = "hello, liang"

執行這句的時候，會觸發的，所以會執行一次。但從程式碼來看函數中由於為，對輸出沒有任何影響，這次執行其實是沒有必要的。textsetupdateComponentupdateComponentdata.okfalsedata.text

之所以執行了，是因為第一次執行讀取了從而收集了，第二次執行的時候，雖然沒有讀到，但之前的也沒有清除掉，所以這一次改變的時候依舊會執行。updateComponentdata.textWatcherupdateComponentdata.textWatcherdata.textupdateComponent

所以我們需要的就是當重新執行的時候，如果已經不依賴於某個了，我們需要將當前從該中移除掉。updateComponentWatcherDepWatcherDep

問題

總結下來我們需要做兩件事情。

去重，中不要重複收集。DepWatcher
重置，如果該屬性對中的已經沒有影響了（換句話就是，中的已經不會讀取到該屬性了），就將該從該屬性的中刪除。DepWacherWatcherupdateComponentWatcherDep

去重

去重的話有兩種方案：

Dep 中的陣列換為。subsSet
每個物件引入，物件中記錄所有的的，下次重新收集依賴的時候，如果的已經存在，就不再收集該了。DepidWatcherDepidDepidWatcher

Vue2 原始碼中採用的是方案這裡我們實現下：2

Dep 類的話只需要引入即可。id

/*************改動***************************/
let uid = 0;
/****************************************/
export default class Dep {
    static target; //當前在執行的函數
    subs; // 依賴的函數
  	id; // Dep 物件標識
    constructor() {
      /**************改動**************************/
        this.id = uid++;
      /****************************************/
        this.subs = []; // 儲存所有需要執行的函數
    }

    addSub(sub) {
        this.subs.push(sub);
    }
    depend() {
        if (Dep.target) {
            // 委託給 Dep.target 去呼叫 addSub
            Dep.target.addDep(this);
        }
    }

    notify() {
        for (let i = 0, l = this.subs.length; i < l; i++) {
            this.subs[i].update();
        }
    }
}

Dep.target = null; // 靜態變數，全域性唯一

在中，我們引入來記錄所有的。Watcherthis.depIdsid

import Dep from "./dep";
export default class Watcher {
  constructor(Fn) {
    this.getter = Fn;
    /*************改動***************************/
    this.depIds = new Set(); // 擁有 has 函數可以判斷是否存在某個 id
    /****************************************/
    this.get();
  }

  /**
     * Evaluate the getter, and re-collect dependencies.
     */
  get() {
    Dep.target = this; // 儲存包裝了當前正在執行的函數的 Watcher
    let value;
    try {
      value = this.getter.call();
    } catch (e) {
      throw e;
    } finally {
      this.cleanupDeps();
    }
    return value;
  }

  /**
     * Add a dependency to this directive.
     */
  addDep(dep) {
    /*************改動***************************/
    const id = dep.id;
    if (!this.depIds.has(id)) {
      dep.addSub(this);
    }
    /****************************************/

  }

  /**
     * Subscriber interface.
     * Will be called when a dependency changes.
     */
  update() {
    this.run();
  }

  /**
     * Scheduler job interface.
     * Will be called by the scheduler.
     */
  run() {
    this.get();
  }
}

重置

同樣是兩個方案：

全量式移除，儲存所影響的所有物件，當重新收集的前，把當前從記錄中的所有物件中移除。WatcherDepWatcherWatcherDep
增量式移除，重新收集依賴時，用一個新的變數記錄所有的物件，之後再和舊的物件列表比對，如果新的中沒有，舊的中有，就將當前從該物件中移除。DepDepWatcherDep

Vue2 中採用的是方案，這裡也實現下。2

首先是類，我們需要提供一個方法。DepremoveSub

import { remove } from "./util";
/*
export function remove(arr, item) {
    if (arr.length) {
        const index = arr.indexOf(item);
        if (index > -1) {
            return arr.splice(index, 1);
        }
    }
}
*/
let uid = 0;

export default class Dep {
    static target; //當前在執行的函數
    subs; // 依賴的函數
    id; // Dep 物件標識
    constructor() {
        this.id = uid++;
        this.subs = []; // 儲存所有需要執行的函數
    }
		
    addSub(sub) {
        this.subs.push(sub);
    }
  /*************新增************************/
    removeSub(sub) {
        remove(this.subs, sub);
    }
  /****************************************/
    depend() {
        if (Dep.target) {
            // 委託給 Dep.target 去呼叫 addSub
            Dep.target.addDep(this);
        }
    }

    notify() {
        for (let i = 0, l = this.subs.length; i < l; i++) {
            this.subs[i].update();
        }
    }
}

Dep.target = null; // 靜態變數，全域性唯一

然後是類，我們引入來儲存所有的舊物件，引入來儲存所有的新物件。Watcherthis.depsDepthis.newDepsDep

import Dep from "./dep";
export default class Watcher {
    constructor(Fn) {
        this.getter = Fn;
        this.depIds = new Set(); // 擁有 has 函數可以判斷是否存在某個 id
      	/*************新增************************/
        this.deps = [];
        this.newDeps = []; // 記錄新一次的依賴
        this.newDepIds = new Set();
      	/****************************************/
        this.get();
    }

    /**
     * Evaluate the getter, and re-collect dependencies.
     */
    get() {
        Dep.target = this; // 儲存包裝了當前正在執行的函數的 Watcher
        let value;
        try {
            value = this.getter.call();
        } catch (e) {
            throw e;
        } finally {
          	/*************新增************************/
            this.cleanupDeps();
          	/****************************************/
        }
        return value;
    }

    /**
     * Add a dependency to this directive.
     */
    addDep(dep) {
        const id = dep.id;
      /*************新增************************/
        // 新的依賴已經存在的話，同樣不需要繼續儲存
        if (!this.newDepIds.has(id)) {
            this.newDepIds.add(id);
            this.newDeps.push(dep);
            if (!this.depIds.has(id)) {
                dep.addSub(this);
            }
        }
      /****************************************/
    }

    /**
     * Clean up for dependency collection.
     */
  	/*************新增************************/
    cleanupDeps() {
        let i = this.deps.length;
        // 比對新舊列表，找到舊列表裡有，但新列表裡沒有，來移除相應 Watcher
        while (i--) {
            const dep = this.deps[i];
            if (!this.newDepIds.has(dep.id)) {
                dep.removeSub(this);
            }
        }

        // 新的列表賦值給舊的，新的列表清空
        let tmp = this.depIds;
        this.depIds = this.newDepIds;
        this.newDepIds = tmp;
        this.newDepIds.clear();
        tmp = this.deps;
        this.deps = this.newDeps;
        this.newDeps = tmp;
        this.newDeps.length = 0;
    }
  	/****************************************/
    /**
     * Subscriber interface.
     * Will be called when a dependency changes.
     */
    update() {
        this.run();
    }

    /**
     * Scheduler job interface.
     * Will be called by the scheduler.
     */
    run() {
        this.get();
    }
}

測試

回到開頭的程式碼

import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
    text: "hello, world",
    ok: true,
};
observe(data);

const updateComponent = () => {
    console.log("收到", data.ok ? data.text : "not");
};

new Watcher(updateComponent); // updateComponent 執行一次函數，輸出 hello, world

data.ok = false; // updateComponent 執行一次函數，輸出 not

data.text = "hello, liang"; // updateComponent 會執行嗎？

此時修改的話就不會再執行了，因為第二次執行的時候，我們把中裡的清除了。data.textupdateComponentdata.textDepWatcher