前言

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

狀態(tài)管理

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

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

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

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

Signals 來了！

好消息來了！最近，官方終于發(fā)布了 Signals 的 TC39 標(biāo)準(zhǔn)化草案，現(xiàn)已進入 Stage 0 階段，并提供了符合規(guī)范的 polyfill。

Signals 是 JavaScript 原生支持的狀態(tài)管理 API！

圖片

優(yōu)勢

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

基本用法

聲明 Signals 狀態(tài)管理：

首先，聲明一個 Signal 變量來管理狀態(tài)。

圖片

讀取和修改值：

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

圖片

依賴關(guān)系：

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

圖片

依賴項鏈：

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

圖片

如何監(jiān)聽狀態(tài)變化？

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

圖片

與 Pinia、Vuex 的比較

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

階段介紹

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