變更檢測

Angular 中，數據是由頂部根節點流向最后的葉子節點，整個數據流是單向，構成一顆單向樹。

Angular 認為所有的異步操作都有可能會引起模型的變化，引起數據模型發生變化的事件源有：

• Events：click, mouseover, keyup ...
• Timers：setInterval、setTimeout
• XHRs：Ajax(GET、POST ...)

Angular 封裝 Zone來攔截跟蹤異步，一旦發現異步行為，Angular 就會進行變更檢測。

因為數據流是單向的，組件的數據來源只能由父組件進行傳入，所以 Angular 會從上到下，廣度遍歷檢測組件，只要父組件檢測完畢就能繼續檢測子組件。而相比 angularjs，雙向、混亂的數據流方向，會導致重復變更檢測重復多次，直到數據穩定，可能會導致性能問題，或者出現數據和視圖處于不一致的狀態，即渲染過程完成后的視圖不能反映數據的實際狀態。

渲染輸出

當檢測到數據模型變化時，組件需要重新渲染，Angular將運行它的 DOM 生成函數，該函數會生成一個新的 DOM數據結構，該結構對應于組件 View 的新版本。

Angular 在渲染過程中，評估模板表達式并在整個組件樹中調用生命周期鉤子。

注意：綠色標志會多次調用

從生命調用周期來看（綠色有向線），ngAfterViewChecked 標示該組件及子組件視圖輸出完成。看以下一例子：

import {Component, AfterViewChecked} from '@angular/core';import {Course} from "./course";@Component({ selector: 'app-root', template: ` <div class="course">  <span class="description">{{course.description}}</span> </div>`})export class AppComponent implements AfterViewChecked { course: Course = {  id: 1,  description: "Angular For Beginners" }; ngAfterViewChecked() {  this.course.description += Math.random(); }}

上述代碼會在Angular變更檢測周期發生錯誤。組件已經完成 DOM 數據結構輸出，我們還在該組件 ngAfterViewChecked() 方法中修改了數據狀態。這樣導致了視圖渲染后，數據跟視圖狀態不一致。

數據從組件類流向表示它們的DOM數據結構，生成這些DOM數據結構的行為本身就不會導致數據的進一步修改。但我們在 ngAfterView 生命周期發生修改數據行為，Angular 的“單向數據流”規則禁止在一個視圖已經被組合好之后再更新視圖。
這意味著數據模型到視圖過程是單向，不可在視圖后發生數據流發生改變。

總結

從變更檢測過程以及渲染輸出過程中，可以總結出：

單向數據流指的是從組件樹的頂部到底部渲染掃描過程中應用程序數據流轉到由渲染過程生成的輸出DOM數據結構的流程。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。