Zone.js 是什么，"zoneless" Angular 是什么意思？

Question

Accepted Answer

**Zone.js** 是一个库，Angular 历来一直使用它来了解**何时运行变更检测**。它补丁了浏览器的异步 API，使 Angular 能够自动检测到可能改变状态的任何事件。**Zoneless** Angular 移除了这种依赖，转而依靠 signals 和显式通知。

## Zone.js 的作用

```text
Zone.js monkey-patches async APIs: setTimeout, addEventListener, Promise,
XHR/fetch, etc. When any of them fires, Zone.js notifies Angular →
Angular runs change detection automatically.
```

这是 Angular 自动更新背后的"魔法"：您在 HTTP 响应或点击后更改一个属性，视图就会自动更新——因为 Zone.js 告诉 Angular 一个异步事件已完成。

```ts
// you write this, and the view updates automatically — thanks to Zone.js:
setTimeout(() => { this.message = "Updated"; }, 1000); // Zone.js triggers CD
```

## Zone.js 的缺点

```text
✗ Overhead — patches everything, and triggers CD broadly (checks the whole tree)
✗ ~100KB added to the bundle
✗ Imprecise — runs change detection even when nothing relevant changed
✗ Can be confusing with third-party code that runs outside Angular's zone
```

因为 Zone.js 无法判断*什么*发生了变化，它会在许多事件上触发完整的变更检测——对于大型应用来说效率低下。

## Zoneless Angular（基于 signals）

```ts
bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()], // no Zone.js
});
```

在 zoneless 模式下，Angular 不依赖于补丁化的异步 API。相反，变更检测**显式地**触发——主要由**signals**触发（当其值改变时通知 Angular），加上 `async` 管道、事件和 `markForCheck()`。

```ts
count = signal(0);
increment() { this.count.set(this.count() + 1); } // the signal tells Angular what changed → fine-grained update
```

## 使用 zoneless 的好处

```text
✓ Smaller bundle (drop ~100KB Zone.js)
✓ Better performance — fine-grained, precise updates (only what depends on changed signals)
✓ Cleaner integration with non-Angular code
✓ Simpler debugging (no zone-related stack noise)
```

## 为什么这很重要

Zone.js 解释了 Angular 长期以来"自动"变更检测的工作原理——以及它的成本（包体积、粗粒度/不精确检测）。

转向**zoneless**，由**signals**驱动，是一个重大的架构转变：它使更新细粒度且显式，减小包体积，并改善性能。

理解两方面——为什么 Zone.js 存在以及什么将取代它——变得越来越重要，因为 Angular 正在向以 signals 为基础、zoneless 为默认的未来发展。