2025-08-09 为什么Angular要去Zone

Angular 想去掉 zone.js（进入所谓的 Zoneless 模式），主要是为了性能、可预测性和简化框架运行机制。我帮你拆开说：

1. zone.js 的原理与问题

• 原理
  zone.js 会劫持（monkey-patch）浏览器的异步 API（如 setTimeout、addEventListener、Promise 等），在异步任务完成时自动触发 Angular 的变更检测。

• 问题

  1. 全局劫持：会修改原生 API，影响性能，也可能与第三方库冲突。
  2. 变更检测过度：只要有异步事件发生，就会触发整棵组件树的检查，即使大部分数据没变。
  3. 调试困难：异步链路被 zone 包裹后，调用栈更难阅读。
  4. 现代浏览器冗余：随着浏览器和框架响应式能力增强，zone 的部分功能变得不必要。

2. Zoneless 的优势

1. 更精准的变更触发
   使用 Signals API 或显式触发检测（ChangeDetectorRef.markForCheck() 等），只有相关数据变化才会更新 UI，避免无关组件刷新。
2. 性能更高
   减少了全局监听和 monkey-patch 操作，尤其在大型应用中节省 CPU 开销。
3. 调试更直观
   没有 zone 的包装，异步调用栈更干净。
4. 更符合现代响应式思路
   结合 Signals，可以完全依赖数据流来驱动 UI，而不是“事件驱动检测”。

3. 迁移策略

• Angular 20 提供了 Zoneless 开发预览模式：

  bootstrapApplication(AppComponent, {
    zone: 'noop'
  });
  

  这样就可以跳过 zone.js。

• 迁移时，需要自己显式触发或依赖 Signals 来更新 UI，不再是“自动检测所有变化”。

4. 一个简单对比