前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

狀態管理

在前端開發中，“狀態管理”這一概念并不陌生。無論是 Vue 還是 React，都有著自己的狀態管理方式，例如：

• Vue： Ref、Reactive、Computed、Vuex、Pinia
• React： useState、Redux、Mobx

這些 API 或工具庫有幾個共同的特點：

• 自動狀態追蹤與更新： 當一個值發生變化時，所有依賴于它的部分會自動重新計算，無需手動觸發更新。
• 性能優化： 更新依賴項時采用惰性更新策略，以減少不必要的性能損耗。 然而，以上這些狀態管理方案大多與特定前端框架緊密耦合，未能得到 JavaScript 原生的支持。

Signals 來了！

好消息來了！最近，官方終于發布了 Signals 的 TC39 標準化草案，現已進入 Stage 0 階段，并提供了符合規范的 polyfill。

Signals 是 JavaScript 原生支持的狀態管理 API！

圖片

優勢

• 自動狀態追蹤與更新： 與前述工具相似，當某個值變化時，所有依賴它的地方將自動更新，無需手動管理。
• 性能優勢： 通過惰性更新的方式，當某個值變化時，僅更新依賴項，減少不必要的性能損失。
• 跨框架支持： Signals 與特定框架無關，具有極好的兼容性，可以在任何框架中使用。

基本用法

聲明 Signals 狀態管理：

首先，聲明一個 Signal 變量來管理狀態。

圖片

讀取和修改值：

使用 get 讀取 Signal 的值，使用 set 修改其值。

圖片

依賴關系：

你還可以聲明另一個 Signal 變量 B，并讓它依賴于 A，就像 Vue 中的 computed 一樣。這時你需要使用 Signals.computed。

圖片

依賴項鏈：

同樣，一個計算出來的值也可以依賴于其他的變量。這形成了一個依賴鏈。

圖片

如何監聽狀態變化？

如果你希望在狀態變化時執行某些操作，可以使用類似 Vue 的 watch。 Signals 提供了一個全局方法 effect，允許我們監聽依賴項的變化，并傳入回調函數來執行我們需要的操作。

圖片

與 Pinia、Vuex 的比較

如果期待 Signals 會取代 Pinia 或 Vuex，那么這可能不太現實。大多數項目都使用 Vue 框架，而 Pinia、Vuex 都是針對 Vue 開發的狀態管理工具，因此在 Vue 中使用它們顯然比 Signals 更為方便。更重要的是，Signals 目前仍處于草案階段，尚未正式發布。

階段介紹

• Stage 0 - Strawman（草案階段）：這是提案的初步階段，通常只是一些初步的想法或建議，尚未經過正式討論。
• Stage 1 - Proposal（提案階段）：此階段提案已被初步討論，并且已有詳細說明。通常由 TC39 委員會成員提交，等待進一步審查和反饋。
• Stage 2 - Draft（草案階段）：提案經過初步審查，涉及語法和語義等方面的考慮。此階段提案可能會進行修改和改進。
• Stage 3 - Candidate（候選階段）：此階段提案已被認為成熟，可以被實際實現到 JavaScript 引擎中。此時已擁有詳細的規范文檔和參考實現。
• Stage 4 - Finished（完成階段）：提案達到了最終階段，正式成為 ECMAScript 標準的一部分，可以在各種 JavaScript 環境中廣泛使用。