Day 12 - Effect ：多重依賴之指數觸發重現 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 12

Vue.js

從零到一打造 Vue3 響應式系統系列第 12 篇

Day 12 - Effect ：多重依賴之指數觸發重現

17th鐵人賽

heyrian

2025-09-21 19:18:08

114 瀏覽

分享至

banner

昨天我們解決了單一依賴所導致的指數增長問題。然而，在真實的開發場景中，一個 effect 函式往往需要依賴多個響應式變數，現在我們試著新增多個依賴，在範例中加入第二個響應式變數 count，並讓 effect 同時依賴 flag 和 count。按鈕的點擊事件只會修改 count 的值。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        padding: 150px;
      }
    </style>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script type="module">
      import { ref, effect } from '../dist/reactivity.esm.js'

      const flag = ref(true)
      const count = ref(0)

      effect(() => {
        flag.value
        count.value
        console.count('effect')
      })

      btn.onclick = () => {
        count.value++
      }
    </script>
  </body>
</html>

day12-01

當 effect 函式同時依賴 flag 和 count 兩個響應式變數後，點擊按鈕觸發更新時，問題又回來了，依賴收集再次出現了指數級的增長，為什麼會這樣？

初始化

day12-02

頁面第一次載入，effect 執行一次。它依序讀取 flag.value 和 count.value，觸發兩次依賴收集。

flag 透過 Link1 與 effect 關聯。
count 透過 Link2 與 effect 關聯。
effect 自己的 deps 鏈表也記錄Link1 -> Link2。

到目前為止，都沒什麼問題。

點擊按鈕執行第一次

day12-03

當按鈕點擊，count.value++ 觸發更新，effect 的 run() 方法被呼叫。

執行 run()：depsTail = undefined。
this.deps 仍然指向 Link1。

(deps && !depsTail) 的狀態，就是我們用來判斷是否「正在重新執行」的關鍵點。

day12-04

讀取 flag.value，觸發第一次 link()
- effect 函式體重新執行，先讀取 flag.value，觸發 link(flag, effect)。
- link() 開始判斷：
  - 條件：depsTail = undefined 、頭節點sub.deps 存在 (sub.deps && !sub.depsTail) 成立。
  - 接著檢查 sub.deps.dep === dep ( Link1 的 dep 是否為 flag)，成立。
- 複用成功，depsTail 移到 flag 的 link。

day12-05

讀取 count.value，觸發第二次 link()
- effect 繼續執行，讀取 count.value，觸發 link(count, effect)。
- link() 開始判斷：
  - (sub.deps && !sub.depsTail) 不成立，因為剛剛 depsTail 移到 flag 的 link。
  - 複用檢查直接失敗，建立了一個全新的 Link3 節點，並且移動指針。