Vue3 響應式系統實現 computed

前言

上篇文章我們實現瞭基本的響應式系統,這篇文章繼續實現 computed。

首先,我們簡單回顧一下:

響應式系統的核心就是一個 WeakMap — Map — Set 的數據結構。

WeakMap 的 key 是原對象,value 是響應式的 Map。這樣當對象銷毀的時候,對應的 Map 也會銷毀。

Map 的 key 就是對象的每個屬性,value 是依賴這個對象屬性的 effect 函數的集合 Set。然後用 Proxy 代理對象的 get 方法,收集依賴該對象屬性的 effect 函數到對應 key 的 Set 中。還要代理對象的 set 方法,修改對象屬性的時候調用所有該 key 的 effect 函數。

上篇文章我們按照這樣的思路實現瞭一個比較完善的響應式系統,然後今天繼續實現 computed。

實現 computed

首先,我們把之前的代碼重構一下,把依賴收集和觸發依賴函數的執行抽離成 track 和 trigger 函數:

邏輯還是添加 effect 到對應的 Set,以及觸發對應 Set 裡的 effect 函數執行,但抽離出來清晰多瞭。

然後繼續實現 computed。

computed 的使用大概是這樣的:

const value = computed(() => {
    return obj.a + obj.b;
});

對比下 effect:

effect(() => {
    console.log(obj.a);
});

區別隻是多瞭個返回值。

所以我們基於 effect 實現 computed 就是這樣的:

function computed(fn) {
    const value = effect(fn);
   return value
}

當然,現在的 effect 是沒有返回值的,要給它加一下:

隻是在之前執行 effect 函數的基礎上把返回值記錄下來返回,這個改造還是很容易的。

現在 computed 就能返回計算後的值瞭:

但是現在數據一遍,所有的 effect 都執行瞭,而像 computed 這裡的 effect 是沒必要每次都重新執行的,隻需要在數據變瞭之後執行。

所以我們添加一個 lazy 的 option 來控制 effect 不立刻執行,而是把函數返回讓用戶自己執行。

然後 computed 裡用 effect 的時候就添加一個 lazy 的 option,讓 effect 函數不執行,而是返回出來。

computed 裡創建一個對象,在 value 的 get 觸發時調用該函數拿到最新的值:

我們測試下:

可以看到現在 computed 返回值的 value 屬性是能拿到計算後的值的,並且修改瞭 obj.a. 之後會重新執行計算函數,再次拿 value 時能拿到新的值。

隻是多執行瞭一次計算,這是因為 obj.a 變的時候會執行所有的 effect 函數:

這樣每次數據變瞭都會重新執行 computed 的函數來計算最新的值。

這是沒有必要的,effect 的函數是否執行應該也是可以控制的。所以我們要給它加上調度的功能:

可以支持傳入 schduler 回調函數,然後執行 effect 的時候,如果有 scheduler 就傳給它讓用戶自己來調度,否則才執行 effect 函數。

這樣用戶就可以自己控制 effect 函數的執行瞭:

然後再試一下剛才的代碼:

可以看到,obj.a 變瞭之後並沒有執行 effect 函數來重新計算,因為我們加瞭 sheduler 來自己調度。這樣就避免瞭數據變瞭以後馬上執行 computed 函數,可以自己控制執行。

現在還有一個問題,每次訪問 res.value 都要計算:

能不能加個緩存呢?隻有數據變瞭才需要計算,否則直接拿之前計算的值。

當然是可以的,加個標記就行:

scheduler 被調用的時候就說明數據變瞭,這時候 dirty 設置為 true,然後取 value 的時候就重新計算,之後再改為 false,下次取 value 就直接拿計算好的值瞭。

我們測試下:

我們訪問 computed 值的 value 屬性時,第一次會重新計算,後面就直接拿計算好的值瞭。

修改它依賴的數據後,再次訪問 value 屬性會再次重新計算,然後後面再訪問就又會直接拿計算好的值瞭。

至此,我們完成瞭 computed 的功能。

但現在的 computed 實現還有一個問題,比如這樣一段代碼:

let res = computed(() => {
    return obj.a + obj.b;
});
effect(() => {
    console.log(res.value);
});

我們在一個 effect 函數裡用到瞭 computed 值,按理說 obj.a 變瞭,那 computed 的值也會變,應該觸發所有的 effect 函數。

但實際上並沒有:

這是為什麼呢?

這是因為返回的 computed 值並不是一個響應式的對象,需要把它變為響應式的,也就是 get 的時候 track 收集依賴,set 的時候觸發依賴的執行:

我們再試一下:

現在 computed 值變瞭就能觸發依賴它的 effect 瞭。至此,我們的 computed 就很完善瞭。

完整代碼如下:

const data = {
    a: 1,
    b: 2
}
let activeEffect
const effectStack = [];
function effect(fn, options = {}) {
  const effectFn = () => {
      cleanup(effectFn)
      activeEffect = effectFn
      effectStack.push(effectFn);
      const res = fn()
      effectStack.pop()
      activeEffect = effectStack[effectStack.length - 1]
      return res
  }
  effectFn.deps = []
  effectFn.options = options;
  if (!options.lazy) {
    effectFn()
  }
  return effectFn
}
function computed(fn) {
    let value
    let dirty = true
    const effectFn = effect(fn, {
        lazy: true,
        scheduler(fn) {
            if(!dirty) {
                dirty = true
                trigger(obj, 'value');
            }
        }
    });
    const obj = {
        get value() {
            if (dirty) {
                value = effectFn()
                dirty = false
            }
            track(obj, 'value');
            console.log(obj);
            return value
        }
    }
    return obj
}
function cleanup(effectFn) {
    for (let i = 0; i < effectFn.deps.length; i++) {
        const deps = effectFn.deps[i]
        deps.delete(effectFn)
    }
    effectFn.deps.length = 0
}
const reactiveMap = new WeakMap()
const obj = new Proxy(data, {
    get(targetObj, key) {
        track(targetObj, key);

        return targetObj[key]
   },
   set(targetObj, key, newVal) {
        targetObj[key] = newVal

        trigger(targetObj, key)
    }
})
function track(targetObj, key) {
    let depsMap = reactiveMap.get(targetObj)
    if (!depsMap) {
    reactiveMap.set(targetObj, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
    depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
    activeEffect.deps.push(deps);
}
function trigger(targetObj, key) {
    const depsMap = reactiveMap.get(targetObj)
    if (!depsMap) return
    const effects = depsMap.get(key)
    const effectsToRun = new Set(effects)
    effectsToRun.forEach(effectFn => {
        if(effectFn.options.scheduler) {
            effectFn.options.scheduler(effectFn)
        } else {
            effectFn()
        }
    })
}

總結

上篇文章我們實現瞭響應式的核心數據結構,依賴的收集、數據變化後通知依賴函數執行。今天我們在那基礎上實現瞭 computed。我們改造瞭 effect 函數,讓它返回傳入的 fn,然後在 computed 裡自己執行來拿到計算後的值。

我們又支持瞭 lazy 和 scheduler 的 option,lazy 是讓 effect 不立刻執行傳入的函數,scheduler 是在數據變動觸發依賴執行的時候回調 sheduler 來調度。

我們通過標記是否 dirty 來實現緩存,當 sheduler 執行的時候,說明數據變瞭,把 dirty 置為 true,重新計算 computed 的值,否則直接拿緩存。此外,computed 的 value 並不是響應式對象,我們需要單獨的調用下 track 和 trigger。這樣,我們就實現瞭完善的 computed 功能,vue3 內部也是這樣實現的。

到此這篇關於 Vue3 響應式系統實現 computed的文章就介紹到這瞭,更多相關 Vue3 computed內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: