變更檢測(cè)

Angular 中，數(shù)據(jù)是由頂部根節(jié)點(diǎn)流向最后的葉子節(jié)點(diǎn)，整個(gè)數(shù)據(jù)流是單向，構(gòu)成一顆單向樹。

Angular 認(rèn)為所有的異步操作都有可能會(huì)引起模型的變化，引起數(shù)據(jù)模型發(fā)生變化的事件源有：

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

Angular 封裝 Zone來攔截跟蹤異步，一旦發(fā)現(xiàn)異步行為，Angular 就會(huì)進(jìn)行變更檢測(cè)。

因?yàn)閿?shù)據(jù)流是單向的，組件的數(shù)據(jù)來源只能由父組件進(jìn)行傳入，所以 Angular 會(huì)從上到下，廣度遍歷檢測(cè)組件，只要父組件檢測(cè)完畢就能繼續(xù)檢測(cè)子組件。而相比 angularjs，雙向、混亂的數(shù)據(jù)流方向，會(huì)導(dǎo)致重復(fù)變更檢測(cè)重復(fù)多次，直到數(shù)據(jù)穩(wěn)定，可能會(huì)導(dǎo)致性能問題，或者出現(xiàn)數(shù)據(jù)和視圖處于不一致的狀態(tài)，即渲染過程完成后的視圖不能反映數(shù)據(jù)的實(shí)際狀態(tài)。

渲染輸出

當(dāng)檢測(cè)到數(shù)據(jù)模型變化時(shí)，組件需要重新渲染，Angular將運(yùn)行它的 DOM 生成函數(shù)，該函數(shù)會(huì)生成一個(gè)新的 DOM數(shù)據(jù)結(jié)構(gòu)，該結(jié)構(gòu)對(duì)應(yīng)于組件 View 的新版本。

Angular 在渲染過程中，評(píng)估模板表達(dá)式并在整個(gè)組件樹中調(diào)用生命周期鉤子。

注意：綠色標(biāo)志會(huì)多次調(diào)用

從生命調(diào)用周期來看（綠色有向線），ngAfterViewChecked 標(biāo)示該組件及子組件視圖輸出完成?？匆韵乱焕樱?br />

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();
 }
}

上述代碼會(huì)在Angular變更檢測(cè)周期發(fā)生錯(cuò)誤。組件已經(jīng)完成 DOM 數(shù)據(jù)結(jié)構(gòu)輸出，我們還在該組件 ngAfterViewChecked() 方法中修改了數(shù)據(jù)狀態(tài)。這樣導(dǎo)致了視圖渲染后，數(shù)據(jù)跟視圖狀態(tài)不一致。

數(shù)據(jù)從組件類流向表示它們的DOM數(shù)據(jù)結(jié)構(gòu)，生成這些DOM數(shù)據(jù)結(jié)構(gòu)的行為本身就不會(huì)導(dǎo)致數(shù)據(jù)的進(jìn)一步修改。但我們?cè)?ngAfterView 生命周期發(fā)生修改數(shù)據(jù)行為，Angular 的“單向數(shù)據(jù)流”規(guī)則禁止在一個(gè)視圖已經(jīng)被組合好之后再更新視圖。
這意味著數(shù)據(jù)模型到視圖過程是單向，不可在視圖后發(fā)生數(shù)據(jù)流發(fā)生改變。

總結(jié)

從變更檢測(cè)過程以及渲染輸出過程中，可以總結(jié)出：

單向數(shù)據(jù)流指的是從組件樹的頂部到底部渲染掃描過程中應(yīng)用程序數(shù)據(jù)流轉(zhuǎn)到由渲染過程生成的輸出DOM數(shù)據(jù)結(jié)構(gòu)的流程。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論