在 3.6 alpha 中，除了我們後面會講到的 Vapor Mode，
再來就是響應式系統又又又被重寫了。
這個 alien-signals 是什麼呢，是由 StackBlitz 開發的輕量級 Library
Alien signals will arrive in 3.6
透過基於 signal 的 push-pull 混和算法, 來達成更高的效能，
基本上不跟 Vue 框架綁死，在其他語言如 Java, C# , Go 都有實現案例。
那他這個特點是什麼呢? 沒錯 保持一貫的風格。
再來看看，根據作者 Johnson Chu 的 X 所提供的數據圖:
Statistics from Johnson
在這圖中越低代表速度越快，綠色那條線是 SolidJS 的數據，
alien-signals 在哪裡 @@
對 你沒看錯 在地板那條藍的就是，基本上輾壓大部分響應式系統。
根據 Framework Benchmark 測試結果，alien-signals 也是位居冠軍。
基本上你可以把他視為一個響應式的基礎單位，
一個 Signal 可以被理解為包含一個值的響應式包裝 。
可以去監聽當 Signals 有變化時，
你去做追蹤和對應的操作，這個操作叫做 effect。
聽上去有沒有很像一個我們熟悉的東西 ?
再根據我們前篇在 Vue 過氣前要學的第六件事 - 響應式到底為什麼那麼重要 提到的:
最後你可以把響應式核心理解為，包含一個值 (value) 的響應式包裝。
沒錯!就是我們的 ref，同樣也是包含一個 value 的響應式包裝，
所以廣義來說 Vue 可以算是 Signal 的一種實現。
那 Signal 並不是這次才蹦出來的東西，
Angular, Svelte 5, Solid, Preact 中也已經有 Singals 的實現。
在探討這個最新的推拉演算法前我們可能要先快速理解一下推跟拉是什麼，
Push-based ( Eager ) propagation :
推的傳播算法，當依賴值產生變化，通知訂閱者也要跟著變化，
但可能遇到鑽石問題，導致重複計算
訂閱者 :
依賴某個值的函式或運算，當這個值改變時，Vue 會通知這些訂閱者重新執行。
Pull-based ( Lazy ) propagation :
拉的傳播算法是惰性的，舉例來說，當讀取到 computed 才會去拉取依賴項的變化，
但可能會遇到明明依賴項不變，但還是重複拉取的問題。
Push-pull-based : 就是結合上面兩種去做的方法，簡單來說的話會有以下步驟，
透過 soonwang 所製作這張圖片可以有更好的理解。
把紅色色塊視為需要更改 ( Dirty )，
綠色視為可能需要更改 ( PendingComputed )，
computed 觸發 pull 階段，pull 一路從 F => A 的方向拉取通知,上面這個就是所謂的 Reactively 圖形著色法
同時也是 Alien-signals Push-pull-based 的大致概念，如果你想了解更多，
推薦你可以看以下兩篇 :
或是我有看到 LucianoLee 所撰寫有關 Signal 的系列文，也非常令人期待。
今天我們介紹了 signals 響應式系統，講解了 Alien-signals 這個輕量式函式庫。
深入講解了 Push-pull 演算法，光看原始碼對於理解這個邏輯有點太硬了，
所以我們用圖形著色圖解來更好的了解整個流程。
Vue 3.6 中以 Alien-signals 重構了響應式系統，在 Benchmark 中取得了很好的成績。
不過在我的角度來說，既然 API 使用方式並無改變，除非你的專案大到一定程度，
不然就大部分的初階使用者來說，是不太會需要知道這個更新有什麼特別的，
快了幾倍幾十倍對一般人來說感受其實也不大。
到這邊，我們講完了目前為止響應式系統的核心概念和 API，
明天將會進入渲染階段，為整個篇章做一個很好的收尾。
如果你喜歡這個系列或是想看我發瘋，歡迎按下 訂閱 一起走完這三十天吧
iThome鐵人賽
看影片追技術