什么是 Angular Signals？

Question

Accepted Answer

**Signals** 是 Angular 的响应式原语（在 Angular 16+ 中引入），用于管理状态——它是围绕值的包装器，**在值改变时通知消费者**，实现细粒度、高效的更新，而无需依赖 Zone.js 变更检测。 ## 创建和使用 signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## 读取 signal：像调用函数一样调用它 ```html ``` 注意 signals **通过调用它们来读取**（`count()`），而不是作为普通属性。在模板中，Angular 精确跟踪视图读取的 signals，因此当 signal 改变时，只有受影响的部分会更新。 ## 三种 signal 类型 ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` 是懒加载且缓存的（类似 Vue 的 computed）；`effect` 以响应式方式运行副作用（类似 watcher）。 ## 为什么这很重要：细粒度响应性 ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Signals 为 Angular 提供**精确的依赖跟踪**——当 signal 改变时，只有实际读取它的视图和 computed 会更新。这比 Zone.js 触发的广泛变更检测更高效，是完全移除 Zone.js 的基础（无zone模式）。 ## Signal 基础输入（较新） ```ts name = input(); // @Input as a signal name = input.required(); ``` ## 为什么这很重要 Signals 是 Angular 响应性最重要的近期演进——相比隐式 Zone.js 变更检测，它是一个更简单、更显式、高效得多的模型。它们实现细粒度更新、减少不必要的检查、与 computed/effect 无缝集成，并为无zone Angular 的发展铺平道路。理解 signals 变得越来越必要，因为 Angular 正在将新开发转向使用它们作为默认状态原语。