Hello，大家好，我是 Sunday。

今天咱們來(lái)看 TC39 的新提案 Signals 信號(hào)。該提案主要應(yīng)用在 狀態(tài)管理 相關(guān)的場(chǎng)景下，可以結(jié)合目前狀態(tài)管理工具（Vuex、Pinia、Redux、MobX 或者是單純的 ref（Vue3 中聲明響應(yīng)式數(shù)據(jù)的方案） 等）實(shí)現(xiàn)全新的解決方案。

目前猶大也在 vue 官網(wǎng)中提供了 Connection to Signals（與信號(hào) (signal) 的聯(lián)系） 的概念，并提到 Signal 的重要性

那么下面咱們就來(lái)看看這個(gè) Signal 到底是個(gè)什么東西。

什么是 TC39 以及標(biāo)準(zhǔn)提案流程

想要了解 Signal 咱們先來(lái)看看 TC39 提案！

TC39 提案是指由ECMAScript（JavaScript的標(biāo)準(zhǔn)）技術(shù)委員會(huì)TC39（Technical Committee 39）提出的標(biāo)準(zhǔn)改進(jìn)建議。TC39負(fù)責(zé)JavaScript語(yǔ)言的演進(jìn)和標(biāo)準(zhǔn)化工作。一個(gè)提案從最初的想法到最終成為標(biāo)準(zhǔn)，需要經(jīng)過(guò)多個(gè)階段的審核和修改。以下是提案的各個(gè)階段：

1. Strawman（稻草人階段）：這個(gè)階段是一個(gè)初步的想法，可能沒(méi)有具體的實(shí)現(xiàn)細(xì)節(jié)，目的是引發(fā)討論和反饋。
2. Proposal（提案階段）：在這個(gè)階段，提案需要有一個(gè)詳細(xì)的規(guī)范描述，并且至少有一個(gè)實(shí)現(xiàn)。提案會(huì)在TC39會(huì)議上討論，若獲得足夠支持，則進(jìn)入下一階段。
3. Draft（草案階段）：在這個(gè)階段，提案已經(jīng)有了詳細(xì)的規(guī)范文檔，并且需要有至少兩個(gè)不同的實(shí)現(xiàn)。提案在這個(gè)階段需要進(jìn)行更廣泛的測(cè)試和反饋。
4. Candidate（候選階段）：提案在這個(gè)階段被認(rèn)為是穩(wěn)定的，并且所有可能的改進(jìn)建議已經(jīng)納入。規(guī)范文檔在這個(gè)階段已經(jīng)基本定型，剩下的工作主要是驗(yàn)證和確保沒(méi)有遺漏的錯(cuò)誤。
5. Finished（完成階段）：提案在這個(gè)階段成為ECMAScript標(biāo)準(zhǔn)的一部分，將被正式發(fā)布。此時(shí)，提案的內(nèi)容已經(jīng)被完全采納和記錄。

為什么需要 Signals（信號(hào)）

要開(kāi)發(fā)復(fù)雜的用戶界面 (UI)，JavaScript 應(yīng)用程序開(kāi)發(fā)人員需要以高效的方式 存儲(chǔ)、計(jì)算、使?fàn)顟B(tài)失效、同步并將狀態(tài)推送到應(yīng)用程序的視圖層。UI 通常不僅僅涉及管理簡(jiǎn)單的值，還經(jīng)常涉及渲染計(jì)算狀態(tài)，而計(jì)算狀態(tài)依賴于其他值或狀態(tài)的復(fù)雜樹(shù)，而這些值或狀態(tài)本身也是計(jì)算出來(lái)的。

Signals 的目標(biāo)是提供用于管理此類(lèi)應(yīng)用程序狀態(tài)的基礎(chǔ)設(shè)施，以便開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯，而不是這些重復(fù)的細(xì)節(jié)。

咱們來(lái)看一個(gè)例子（基于 preact）：

import { signal } from "@preact/signals";

const count = signal(0);

// 通過(guò)訪問(wèn).Value讀取信號(hào)的值：
console.log(count.value);   // 0

// 更新信號(hào)的值
count.value += 1;

// 訪問(wèn)值也必須要有 .value
console.log(count.value);  // 1

通過(guò)以上代碼我們可以看出來(lái) Signals 與 vue 中的 ref 使用是有些類(lèi)似的。它們都需要通過(guò)一個(gè)方法進(jìn)行初始化，同時(shí)訪問(wèn)的時(shí)候需要 .value

Signals 與框架的關(guān)聯(lián)

除了我們剛才看到的 preact 之外，還有很多的框架也實(shí)現(xiàn)了 Signals。比如：

• Solid
• Angular
• Qwik

從根本上說(shuō)，Signals 是與 Vue 中的 ref 相同的響應(yīng)性基礎(chǔ)類(lèi)型（再前面我們也看到了類(lèi)似的代碼例子）。**Signals是一個(gè)在訪問(wèn)時(shí)跟蹤依賴、在變更時(shí)觸發(fā)副作用的值容器。

這種基于響應(yīng)性基礎(chǔ)類(lèi)型的范式在前端領(lǐng)域并不是一個(gè)特別新的概念：它可以追溯到十多年前的 Knockout observables 和 Meteor Tracker 等實(shí)現(xiàn)。

Vue 的選項(xiàng)式 API 和 React 的狀態(tài)管理庫(kù) MobX 也是基于同樣的原則，只不過(guò)將基礎(chǔ)類(lèi)型這部分隱藏在了對(duì)象屬性背后。