淺析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為任何事件處理程序添加了