浅析Angular中的Change Detection机制

前端（vue）入门到精通课程，老师在线辅导：联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

什么是 Change Detection ?

在应用的开发过程中，state 代表需要显示在应用上的数据。当 state 发生变化时，往往需要一种机制来检测变化的 state 并随之更新对应的界面。这个机制就叫做 Change Detection 机制。【相关教程推荐：《angular教程》】

在 WEB 开发中，更新应用界面其实就是对 DOM 树进行修改。由于 DOM 操作是昂贵的，所以一个效率低下的 Change Detection 会让应用的性能变得很差。因此，框架在实现 Change Detection 机制上的高效与否，很大程度上决定了其性能的好坏。

Change Detection 是如何实现的

Angular 可以检测组件数据何时更改，然后自动重新渲染视图以反映该更改。但是在像点击按钮这样的低级事件之后，它怎么能做到这一点呢？

通过 Zone ， Angular 能够实现自动的触发 Change Detection 机制。

Zone 是什么呢？简而言之，Zone 是一个执行上下文（execution context），可以理解为一个执行环境。与常见的浏览器执行环境不同，在这个环节中执行的所有异步任务都被称为 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 在启动时会重写浏览器 low-level API，例如addEventListener，它是用于注册所有浏览器事件的浏览器函数，包括点击处理。Angular 将替换addEventListener为与此等效的新版本：

// this is the new version of addEventListener                                     function addEventListener(eventName, callback) {      // call the real addEventListener                     callRealAddEventListener(eventName, function() {          //first call the original callback                       callback(...);         // and then run Angular-specific functionality         var changed = angular.runChangeDetection();         if (changed) {             angular.reRenderUIPart();         }     }); }

新的addEventListener为任何事件处理程序添加了