iT邦幫忙

2025 iThome 鐵人賽

DAY 7
1
Vue.js

在 Vue 過氣前要學的三十件事系列 第 7

在 Vue 過氣前要學的第七件事 - 外星人來了嗎!?

  • 分享至 

  • xImage
  •  

前言

在 3.6 alpha 中,除了我們後面會講到的 Vapor Mode,
再來就是響應式系統又又又被重寫了。
https://ithelp.ithome.com.tw/upload/images/20250906/201727841O1zOE3kqB.png
這個 alien-signals 是什麼呢,是由 StackBlitz 開發的輕量級 Library

Alien signals will arrive in 3.6
https://ithelp.ithome.com.tw/upload/images/20250906/20172784iZWOGtv0Jc.png

透過基於 signal 的 push-pull 混和算法, 來達成更高的效能,
基本上不跟 Vue 框架綁死,在其他語言如 Java, C# , Go 都有實現案例

那他這個特點是什麼呢? 沒錯 保持一貫的風格。


再來看看,根據作者 Johnson Chu 的 X 所提供的數據圖:


Statistics from Johnson
在這圖中越低代表速度越快,綠色那條線是 SolidJS 的數據,

alien-signals 在哪裡 @@
對 你沒看錯 在地板那條藍的就是,基本上輾壓大部分響應式系統。


根據 Framework Benchmark 測試結果,alien-signals 也是位居冠軍。

Signals 是什麼

基本上你可以把他視為一個響應式的基礎單位,
一個 Signal 可以被理解為包含一個響應式包裝

可以去監聽當 Signals 有變化時,
你去做追蹤和對應的操作,這個操作叫做 effect。

聽上去有沒有很像一個我們熟悉的東西 ?
https://ithelp.ithome.com.tw/upload/images/20250906/20172784lL9HZryslT.png

再根據我們前篇在 Vue 過氣前要學的第六件事 - 響應式到底為什麼那麼重要 提到的:

最後你可以把響應式核心理解為,包含一個值 (value) 的響應式包裝。

沒錯!就是我們的 ref,同樣也是包含一個 value 的響應式包裝,
所以廣義來說 Vue 可以算是 Signal 的一種實現。

那 Signal 並不是這次才蹦出來的東西,
Angular, Svelte 5, Solid, Preact 中也已經有 Singals 的實現。

Push-Pull 是什麼

在探討這個最新的推拉演算法前我們可能要先快速理解一下推跟拉是什麼,

Push-based ( Eager ) propagation :
推的傳播算法,當依賴值產生變化,通知訂閱者也要跟著變化,
可能遇到鑽石問題,導致重複計算

訂閱者 :
依賴某個值的函式或運算,當這個值改變時,Vue 會通知這些訂閱者重新執行。

Pull-based ( Lazy ) propagation :
拉的傳播算法是惰性的,舉例來說,當讀取到 computed 才會去拉取依賴項的變化,
可能會遇到明明依賴項不變,但還是重複拉取的問題。

Push-pull-based : 就是結合上面兩種去做的方法,簡單來說的話會有以下步驟,

  1. 第一次 Push : 把 「需要更改」和 「可能需要更改」的標記 推給訂閱者。
  2. Pull : 根據 是否有更改標記 ,來決定要重新計算或是返回緩存值。
  3. 第二次 Push : 如果有要更改,在這次 push 中將 更改值 推給訂閱者。


透過 soonwang 所製作這張圖片可以有更好的理解。

把紅色色塊視為需要更改 ( Dirty ),
綠色視為可能需要更改 ( PendingComputed ),

  1. 當第一次 push 把標記推送出去,將所有 「需要更改」和 「可能需要更改」 都染色。
  2. 再來讀取 computed 觸發 pull 階段,pull 一路從 F => A 的方向拉取通知,
    直到遇到 紅色 B ,開始重新計算並染成 無色 B
  3. push綠色 D,將 綠色 D 染成 紅色 D,重新計算,push 回 F,再次染色並重新計算。
  4. 以此類推直到所有標記消失。

上面這個就是所謂的 Reactively 圖形著色法
同時也是 Alien-signals Push-pull-based 的大致概念,如果你想了解更多,
推薦你可以看以下兩篇 :

或是我有看到 LucianoLee 所撰寫有關 Signal 的系列文,也非常令人期待。

結語

今天我們介紹了 signals 響應式系統,講解了 Alien-signals 這個輕量式函式庫。

深入講解了 Push-pull 演算法,光看原始碼對於理解這個邏輯有點太硬了,
所以我們用圖形著色圖解來更好的了解整個流程。

Vue 3.6 中以 Alien-signals 重構了響應式系統,在 Benchmark 中取得了很好的成績。

不過在我的角度來說,既然 API 使用方式並無改變,除非你的專案大到一定程度,
不然就大部分的初階使用者來說,是不太會需要知道這個更新有什麼特別的,
快了幾倍幾十倍對一般人來說感受其實也不大。

到這邊,我們講完了目前為止響應式系統的核心概念和 API,
明天將會進入渲染階段,為整個篇章做一個很好的收尾。

一些小練習

  1. 怎麼用一句話形容 Signal ?
  2. Vue 到目前為止,響應式系統經過了幾個重大的更改,其中的核心關鍵字是什麼?

資料來源

  1. VueConf 2025 - 尤雨溪
  2. VueConf 2025 - Doctor Wu
  3. Alien-signals
  4. Vue Signals 进化论(v3.6):Alien Signals 终局之战?

https://ithelp.ithome.com.tw/upload/images/20250907/20172784S5U1mpbWzQ.png


上一篇
在 Vue 過氣前要學的第六件事 - 響應式到底為什麼那麼重要
系列文
在 Vue 過氣前要學的三十件事7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言