快捷導(dǎo)航

Vue2?響應(yīng)式系統(tǒng)之分支切換

更新時間：2022年04月12日 20:39:09 作者：windliang

這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之分支切換，文章圍繞Vue2的相關(guān)資料展開主題詳細(xì)內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下

場景

我們考慮一下下邊的代碼會輸出什么。

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 執(zhí)行一次函數(shù)，輸出 hello, world

data.ok = false; // updateComponent 執(zhí)行一次函數(shù)，輸出 not

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

我們來一步一步理清：

observer(data)

攔截了中和的，并且各自初始化了一個實(shí)例，用來保存依賴它們的對象。datatextokget、setDepWatcher

new Watcher(updateComponent)

這一步會執(zhí)行函數(shù)，執(zhí)行過程中用到的所有對象屬性，會將收集到相應(yīng)對象屬性中的中。updateComponentWatcherDep

當(dāng)然這里的其實(shí)是同一個，所以用了指向的箭頭。Watcher

data.ok = false

這一步會觸發(fā) ，從而執(zhí)行中所有的，此時就會執(zhí)行一次。setDepWatcherupdateComponent

執(zhí)行就會重新讀取中的屬性，觸發(fā) ，然后繼續(xù)收集。updateComponentdatagetWatcher

重新執(zhí)行函數(shù) 的時候：updateComponent

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

因?yàn)?nbsp;的值變?yōu)?nbsp;，所以就不會觸發(fā) 的，的就不會變化了。data.okfalsedata.textgettextDep

而會繼續(xù)執(zhí)行，觸發(fā) 收集，但由于我們中使用的是數(shù)組，此時收集到的兩個其實(shí)是同一個，這里是有問題，會導(dǎo)致重復(fù)執(zhí)行，一會兒我們來解決下。data.okgetWatcherDepWacherupdateComponent

data.text = "hello, liang"

執(zhí)行這句的時候，會觸發(fā) 的，所以會執(zhí)行一次。但從代碼來看函數(shù)中由于為，對輸出沒有任何影響，這次執(zhí)行其實(shí)是沒有必要的。textsetupdateComponentupdateComponentdata.okfalsedata.text

之所以執(zhí)行了，是因?yàn)榈谝淮螆?zhí)行讀取了從而收集了，第二次執(zhí)行的時候，雖然沒有讀到，但之前的也沒有清除掉，所以這一次改變的時候依舊會執(zhí)行。updateComponentdata.textWatcherupdateComponentdata.textWatcherdata.textupdateComponent

所以我們需要的就是當(dāng)重新執(zhí)行的時候，如果已經(jīng)不依賴于某個了，我們需要將當(dāng)前從該中移除掉。updateComponentWatcherDepWatcherDep

問題

總結(jié)下來我們需要做兩件事情。

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

去重

去重的話有兩種方案：

Dep 中的數(shù)組換為。subsSet
每個對象引入，對象中記錄所有的的，下次重新收集依賴的時候，如果的已經(jīng)存在，就不再收集該了。DepidWatcherDepidDepidWatcher

Vue2 源碼中采用的是方案這里我們實(shí)現(xiàn)下：2

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

/*************改動***************************/
let uid = 0;
/****************************************/
export default class Dep {
    static target; //當(dāng)前在執(zhí)行的函數(shù)
    subs; // 依賴的函數(shù)
  	id; // Dep 對象標(biāo)識
    constructor() {
      /**************改動**************************/
        this.id = uid++;
      /****************************************/
        this.subs = []; // 保存所有需要執(zhí)行的函數(shù)
    }

    addSub(sub) {
        this.subs.push(sub);
    }
    depend() {
        if (Dep.target) {
            // 委托給 Dep.target 去調(diào)用 addSub
            Dep.target.addDep(this);
        }
    }

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

Dep.target = null; // 靜態(tài)變量，全局唯一

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

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

  /**
     * Evaluate the getter, and re-collect dependencies.
     */
  get() {
    Dep.target = this; // 保存包裝了當(dāng)前正在執(zhí)行的函數(shù)的 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();
  }
}

重置

同樣是兩個方案：

全量式移除，保存所影響的所有對象，當(dāng)重新收集的前，把當(dāng)前從記錄中的所有對象中移除。WatcherDepWatcherWatcherDep
增量式移除，重新收集依賴時，用一個新的變量記錄所有的對象，之后再和舊的對象列表比對，如果新的中沒有，舊的中有，就將當(dāng)前從該對象中移除。DepDepWatcherDep

Vue2 中采用的是方案，這里也實(shí)現(xiàn)下。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; //當(dāng)前在執(zhí)行的函數(shù)
    subs; // 依賴的函數(shù)
    id; // Dep 對象標(biāo)識
    constructor() {
        this.id = uid++;
        this.subs = []; // 保存所有需要執(zhí)行的函數(shù)
    }
		
    addSub(sub) {
        this.subs.push(sub);
    }
  /*************新增************************/
    removeSub(sub) {
        remove(this.subs, sub);
    }
  /****************************************/
    depend() {
        if (Dep.target) {
            // 委托給 Dep.target 去調(diào)用 addSub
            Dep.target.addDep(this);
        }
    }

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

Dep.target = null; // 靜態(tài)變量，全局唯一

然后是類，我們引入來保存所有的舊對象，引入來保存所有的新對象。Watcherthis.depsDepthis.newDepsDep

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

    /**
     * Evaluate the getter, and re-collect dependencies.
     */
    get() {
        Dep.target = this; // 保存包裝了當(dāng)前正在執(zhí)行的函數(shù)的 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;
      /*************新增************************/
        // 新的依賴已經(jīng)存在的話，同樣不需要繼續(xù)保存
        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;
        // 比對新舊列表，找到舊列表里有，但新列表里沒有，來移除相應(yīng) 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 執(zhí)行一次函數(shù)，輸出 hello, world

data.ok = false; // updateComponent 執(zhí)行一次函數(shù)，輸出 not

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

此時修改的話就不會再執(zhí)行了，因?yàn)榈诙螆?zhí)行的時候，我們把中里的清除了。data.textupdateComponentdata.textDepWatcher