今天收到一件噩耗，覺得一切都無所謂了，鐵人賽就平平穩穩地發文吧。

什麼是 Signal？

先來看官方文件解說：

• Signal 是對值的套件裝器，當該值發生變化時，它會通知感興趣的使用者。Signal 可以包含任何值，從原始型別到複雜的資料結構。
• 你可以透過呼叫 signal 的 getter 函式來讀取其值，這允許 Angular 跟蹤 signal 的使用位置。
• Signal 可以是可寫的，也可以是只讀的。

可以想像成 Vue3 的 ref():

1. Angular Signal 具有響應式的特性，「偵測到資料變化後，畫面才跟著渲染」，讓前端畫面的更新更有效率。
2. 只在此元件內運作，資料狀態不需要同步給其他元件。

Angular Signal 的特性

宣告一個 Signal:

首先我們會宣告一個 signal，並給予初始值。
以下的例子便是：宣告一個名為 quantity 的 Signal（訊號狀態），它的初始值是數字 0。

export class AppComponent {
  readonly quantity = signal<number>(0);
}

可寫性 & 可讀的:

• 「可寫性」的意思是：可以改變 signal 的值、內容，提供 set、update 兩種方法。
• 「可讀的」：在元件內讀取 Signal 會使用 this.xxx() 的方法。

// 可寫性:
this.quantity.set(100);
this.quantity.update(value => value + 100);
// 可讀的:
console.log(this.quantity());

計算屬性 Computed:

與 Vue 的 computed 概念相同：用來處理資料運算並快取結果的屬性，當相依的原始資料改變時才會重新計算。

• 是唯讀的 Signal。
• 必須回傳數值：函式內一定要有 return 回傳計算後的結果。
• 具備延遲計算（Lazy Evaluation）、快取(Caching)特性。
• 不適合非同步：不能在裡面放置 API 請求等非同步邏輯，應使用 effect(()=>{})。

readonly quantity = signal<number>(0);
docbleQty = computed(() => this.quantity() * 2);

副作用 Effects:

若說 computed() 改變的是畫面上的結果，effect() 影響的便是畫面外的事情，寫在函式裡的 Signal 的值發生改變，effect() 就會自動重新執行，會隨著元件被銷毀時自動被回收。

• 使用情境：適合用來處理**資料同步、寫入 LocalStorage、呼叫非同步 API、或是手動操作 DOM **等與畫面渲染無直接關係的邏輯。

export class AppComponent {
  readonly quantity = signal<number>(0);
  constructor() {
    effect(() => {
      console.log(`數量: ${this.quantity()} 個`);
    });
  }
}

Angular Signal 的學習就到這邊啦！
更多內容可以到官方文件閱讀唷~。

另外，我的好朋友安東尼也開啟 Angular 系列的鐵人賽文章了，歡迎大家蒞臨：Angular 22 Signal 進化論

參考資料：

• Angular 官方文件 - 訊號
• 簡介 Angular Signals