前端（vue）入門到精通課程，老師在線輔導：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

什么是 Change Detection ?

在應用的開發(fā)過程中，state 代表需要顯示在應用上的數(shù)據(jù)。當 state 發(fā)生變化時，往往需要一種機制來檢測變化的 state 并隨之更新對應的界面。這個機制就叫做 Change Detection 機制?！鞠嚓P(guān)教程推薦：《angular教程》】

在 WEB 開發(fā)中，更新應用界面其實就是對 DOM 樹進行修改。由于 DOM 操作是昂貴的，所以一個效率低下的 Change Detection 會讓應用的性能變得很差。因此，框架在實現(xiàn) Change Detection 機制上的高效與否，很大程度上決定了其性能的好壞。

Change Detection 是如何實現(xiàn)的

Angular 可以檢測組件數(shù)據(jù)何時更改，然后自動重新渲染視圖以反映該更改。但是在像點擊按鈕這樣的低級事件之后，它怎么能做到這一點呢？

通過 Zone ， Angular 能夠?qū)崿F(xiàn)自動的觸發(fā) Change Detection 機制。

Zone 是什么呢？簡而言之，Zone 是一個執(zhí)行上下文（execution context），可以理解為一個執(zhí)行環(huán)境。與常見的瀏覽器執(zhí)行環(huán)境不同，在這個環(huán)節(jié)中執(zhí)行的所有異步任務都被稱為 Task ，Zone 為這些 Task 提供了一堆的鉤子（hook），使得開發(fā)者可以很輕松的「監(jiān)控」環(huán)境中所有的異步任務。

題外話：由于 Angular 極力的推崇使用可觀察對象（Observable），如果完全的基于 Observable 來開發(fā)應用，可以代替 Zone 來實現(xiàn)追蹤調(diào)用棧的功能，且性能還比使用 Zone 會稍好一些。

  // Angular 在 v5.0.0-beta.8 起可以通過配置不使用 Zone    import { platformBrowser } from '@angular/platform-browser';   platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, { ngZone: 'noop' });

覆蓋瀏覽器默認機制

Angular 在啟動時會重寫瀏覽器 low-level API，例如addEventListener，它是用于注冊所有瀏覽器事件的瀏覽器函數(shù)，包括點擊處理。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為任何事件處理程序添加了