場景

  
  {{ text }}



{{ text }}

回到我們之前的響應式系統(tǒng)，模擬一下上邊的情況：

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

const updateMyComponent = () => {
    console.log("子組件收到:", data.inner);
};

const updateParentComponent = () => {
    new Watcher(updateMyComponent);
    console.log("父組件收到：", data.text);
};

new Watcher(updateParentComponent);

data.text = "hello, liang";

可以先 1 分鐘考慮一下上邊輸出什么?

首先回憶一下 new Watcher 會做什么操作。

第一步是保存當前函數(shù)，然后執(zhí)行當前函數(shù)前將全局的 Dep.target 賦值為當前 Watcher 對象。

接下來執(zhí)行 getter 函數(shù)的時候，如果讀取了相應的屬性就會觸發(fā) get ，從而將當前 Watcher 收集到該屬性的 Dep 中。

執(zhí)行過程

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

const updateMyComponent = () => {
    console.log("子組件收到:", data.inner);
};

const updateParentComponent = () => {
    new Watcher(updateMyComponent);
    console.log("父組件收到：", data.text);
};

new Watcher(updateParentComponent);

data.text = "hello, liang";

我們再一步一步理清一下：

• new Watcher(updateParentComponent);

將 Dep.target 賦值為保存了 updateParentComponent 函數(shù)的 Watcher 。

接下來執(zhí)行 updateParentComponent 函數(shù)。

• new Watcher(updateMyComponent);

將 Dep.target 賦值為保存了 updateMyComponent 函數(shù)的 Watcher 。

接下來執(zhí)行 updateMyComponent 函數(shù)。

const updateMyComponent = () => {
    console.log("子組件收到:", data.inner);
};

// 讀取了 inner 變量。
// data.inner 的 Dep 收集當前 Watcher（保存了 `updateMyComponent` 函數(shù)）

const updateParentComponent = () => {
    new Watcher(updateMyComponent);
    console.log("父組件收到：", data.text);
};
// 讀取了 text 變量。
// data.text 的 Dep 收集當前 Watcher （保存了 `updateMyComponent` 函數(shù)）

• data.text = "hello, liang";

觸發(fā) text 的 set 函數(shù)，執(zhí)行它依賴的 Watcher ，而此時是 updateMyComponent 函數(shù)。

所以上邊代碼最終輸出的結果是：

子組件收到: 內部  // new Watcher(updateMyComponent); 時候輸出
父組件收到：hello, world // new Watcher(updateParentComponent); 時候輸出
子組件收到: 內部 // data.text = "hello, liang"; 輸出

然而子組件并不依賴 data.text，依賴 data.text 的父組件反而沒有執(zhí)行。

修復

上邊的問題出在我們保存當前正在執(zhí)行 Watcher 時候使用的是單個變量 Dep.target = null; // 靜態(tài)變量，全局唯一。

回憶一下學習 C 語言或者匯編語言的時候對函數(shù)參數(shù)的處理：

function b(p) {
    console.log(p);
}

function a(p) {
    b("child");
    console.log(p);
}

a("parent");

當函數(shù)發(fā)生嵌套調用的時候，執(zhí)行 a 函數(shù)的時候我們會先將參數(shù)壓入棧中，然后執(zhí)行 b 函數(shù)，同樣將參數(shù)壓入棧中，b 函數(shù)執(zhí)行完畢就將參數(shù)出棧。此時回到 a 函數(shù)就能正確取到 p 參數(shù)的值了。

對應于 Watcher 的收集，我們同樣可以使用一個棧來保存，執(zhí)行函數(shù)前將 Watcher 壓入棧，執(zhí)行函數(shù)完畢后將 Watcher 彈出棧即可。其中，Dep.target 始終指向棧頂 Watcher ，代表當前正在執(zhí)行的函數(shù)。

回到 Dep 代碼中，我們提供一個壓棧和出棧的方法。

import { remove } from "./util";

let uid = 0;

export default class Dep {
    ... 省略
}
Dep.target = null; // 靜態(tài)變量，全局唯一

// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
const targetStack = [];

export function pushTarget(target) {
    targetStack.push(target);
    Dep.target = target;
}

export function popTarget() {
    targetStack.pop();
    Dep.target = targetStack[targetStack.length - 1]; // 賦值為棧頂元素
}

然后 Watcher 中，執(zhí)行函數(shù)之前進行入棧，執(zhí)行后進行出棧。

import { pushTarget, popTarget } 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() {
      /************修改的地方*******************************/
        pushTarget(this); // 保存包裝了當前正在執(zhí)行的函數(shù)的 Watcher
       /*******************************************/
        let value;
        try {
            value = this.getter.call();
        } catch (e) {
            throw e;
        } finally {
          /************修改的地方*******************************/
            popTarget();
          /*******************************************/
            this.cleanupDeps();
        }
        return value;
    }
   ...
}

測試

回到開頭的場景，再來執(zhí)行一下：

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

const updateMyComponent = () => {
    console.log("子組件收到:", data.inner);
};

const updateParentComponent = () => {
    new Watcher(updateMyComponent);
    console.log("父組件收到：", data.text);
};

new Watcher(updateParentComponent);

data.text = "hello, liang";

執(zhí)行 new Watcher(updateParentComponent); 的時候將 Watcher 入棧。

進入 updateParentComponent 函數(shù)，執(zhí)行 new Watcher(updateMyComponent); 的時候將 Watcher 入棧。

執(zhí)行 updateMyComponent 函數(shù)，data.inner 收集當前 Dep.target ，執(zhí)行完畢后 Watcher 出棧。

繼續(xù)執(zhí)行 updateParentComponent 函數(shù)，data.text 收集當前 Dep.target 。

此時依賴就變得正常了，data.text 會觸發(fā) updateParentComponent 函數(shù)，從而輸出如下：

子組件收到: 內部
父組件收到：hello, world
子組件收到: 內部
父組件收到：hello, liang

總結

今天這個相對好理解一些，通過棧解決了嵌套調用的情況。

新聞名稱：Vue2剝絲抽繭-響應式系統(tǒng)之嵌套
本文來源：http://uogjgqi.cn/article/cooegpd.html