Angular变更检测机制实现原理详解

什么是 Change Detection？深度解析 Angular 变更检测机制

在应用开发过程中，state（状态）直接决定了界面上呈现的数据内容。当 state 发生改变时，必须有一套机制能够察觉这一变化，并同步更新对应的界面。这套机制，就是我们常说的 Change Detection（变更检测）。

放在 Web 开发的语境下，更新界面本质上就是修改 DOM 树。由于 DOM 操作的开销非常巨大，如果你的变更检测机制效率低下，应用的性能就会急剧下降。因此，一个框架的变更检测实现是否高效，往往直接决定了它的性能天花板究竟能有多高。

Change Detection 的实现原理

Angular 能够精准感知组件数据何时发生变化，并自动重新渲染视图。但问题来了：在类似点击按钮这种极为底层的事件发生后，它是如何实现“自动”触发的呢？

答案就是 Zone。通过 Zone.js，Angular 能够自动触发变更检测流程。

Zone 到底是什么？通俗地讲，它是一段“执行上下文”，或者说执行环境。与我们常见的浏览器执行环境不同，在这个环境里执行的所有异步任务都被称为 Task，而 Zone 为这些 Task 提供了丰富的钩子（hook）。借助这些钩子，开发者可以非常方便地“监控”环境中的所有异步任务。

顺便提一句：Angular 十分推崇使用可观察对象（Observable）。如果你的应用完全基于 Observable 来构建，实际上可以替代 Zone 去追踪调用栈，而且性能通常比使用 Zone 还要更好一些。

  // Angular 从 v5.0.0-beta.8 开始可以通过配置规避 Zone
  import { platformBrowser } from '@angular/platform-browser';
  platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, { ngZone: 'noop' });

覆盖浏览器默认机制

Angular 在启动时，会重写许多浏览器底层 API。比如addEventListener，这个函数用于注册所有浏览器事件，包括点击处理。Angular 会将其替换为功能类似的全新版本：

// 这是 addEventListener 的新版本
function addEventListener(eventName, callback) { 
    // 先调用真正的 addEventListener
    callRealAddEventListener(eventName, function() { 
        // 首先执行原始的回调
        callback(...);
        // 然后运行 Angular 特有的逻辑
        var changed = angular.runChangeDetection();
        if (changed) {
            angular.reRenderUIPart();
        }
    });
}

这样一来，新的addEventListener就在任何事件处理程序的基础上额外做了不少工作：它不仅调用了注册的回调，还让 Angular 有机会去执行一遍变更检测、更新 UI。

支持浏览器异步 API

被“修补”以支持变更检测的常用浏览器机制，主要包括：

• 所有浏览器事件（单击、鼠标悬停、按键等）
• setTimeout()和setInterval()
• Ajax HTTP 请求

实际上，Zone.js 修补了更多浏览器 API，比如 Websockets，目的就是透明地触发 Angular 变更检测。

但这种机制也存在一个局限：如果因为某些原因，某个异步浏览器 API 不被 Zone.js 支持，那么变更检测就不会被触发。IndexedDB 的回调就是一个典型的例子。

默认的变更检测机制是如何工作的？

每个 Angular 组件都拥有自己的变更检测器，这些检测器在应用启动时就已经创建好了。来看一个例子：

@Component({
    selector: 'todo-item',
    template: `{{todo.owner.firstname}} - {{todo.description}}
       - completed: {{todo.completed}}`
})
export class TodoItem {
    @Input()
    todo:Todo;
    @Output()
    toggle = new EventEmitter