Angular中單向數據流的示例分析

這篇文章主要介紹了Angular中單向數據流的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

變更檢測

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 的“單向數據流”規則禁止在一個視圖已經被組合好之后再更新視圖。
這意味著數據模型到視圖過程是單向，不可在視圖后發生數據流發生改變。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Angular中單向數據流的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!