摘要：別著急，的開發(fā)團(tuán)隊(duì)已經(jīng)考慮到了這個(gè)問題，上述的檢測(cè)機(jī)制只是一種默認(rèn)的檢測(cè)機(jī)制，還提供一種的檢測(cè)機(jī)制設(shè)置元數(shù)據(jù)屬性。

在使用 Angular 進(jìn)行開發(fā)中，我們常用到 Angular 中的綁定——模型到視圖的輸入綁定、視圖到模型的輸出綁定以及視圖與模型的雙向綁定。而這些綁定的值之所以能在視圖與模型之間保持同步，正是得益于Angular中的變化檢測(cè)。

簡單來說，變化檢測(cè)就是 Angular 用來檢測(cè)視圖與模型之間綁定的值是否發(fā)生了改變，當(dāng)檢測(cè)到模型中綁定的值發(fā)生改變時(shí)，則同步到視圖上，反之，當(dāng)檢測(cè)到視圖上綁定的值發(fā)生改變時(shí)，則回調(diào)對(duì)應(yīng)的綁定函數(shù)。

變化監(jiān)測(cè)的關(guān)鍵在于如何最小粒度地監(jiān)測(cè)到綁定的值是否發(fā)生了改變，那么在什么情況下會(huì)導(dǎo)致這些綁定的值發(fā)生變化呢？我們可以看一下我們常用的幾種場(chǎng)景：

@Component({
  selector: "demo-component",
  template: `
    
{{name}}
    change name
  `
})
export class DemoComponent {
    name: string = "Tom";
    
    changeName() {
        this.name = "Jerry";
    }
}

我們?cè)谀０逯型ㄟ^插值表達(dá)式綁定了 name 屬性。當(dāng)點(diǎn)擊change name按鈕時(shí)，改變了 name 屬性的值，這時(shí)模板視圖顯示內(nèi)容也發(fā)生了改變。

@Component({
  selector: "demo-component",
  template: `
    
{{name}}
  `
})
export class DemoComponent implements OnInit {
    name: string = "Tom";
    
    constructor(public http: HttpClient) {}
    
    ngOnInit() {
        // 假設(shè)有這個(gè)./getNewName請(qǐng)求，返回一個(gè)新值"Jerry"
        this.http.get("./getNewName").subscribe((data: string) => {
            this.name = data;
        });
    }
}

我們?cè)谶@個(gè)組件的 ngOnInit 函數(shù)里向服務(wù)器端發(fā)送了一個(gè) Ajax 請(qǐng)求，當(dāng)這個(gè)請(qǐng)求返回結(jié)果時(shí)，同樣會(huì)改變當(dāng)前模板視圖上綁定的 name 屬性的值。

@Component({
  selector: "demo-component",
  template: `
    
{{name}}
  `
})
export class DemoComponent implements OnInit {
    name: string = "Tom";
    
    constructor() {}
    
    ngOnInit() {
        // 假設(shè)有這個(gè)./getNewName請(qǐng)求，返回一個(gè)新值"Jerry"
        setTimeout(() => {
            this.name = "Jerry";
        }, 1000);
    }
}

我們?cè)谶@個(gè)組件的ngOnInit函數(shù)里通過設(shè)定一個(gè)定時(shí)任務(wù)，當(dāng)定時(shí)任務(wù)執(zhí)行時(shí)，同樣會(huì)改變當(dāng)前視圖上綁定的name屬性的值。

其實(shí)，我們不難發(fā)現(xiàn)上述三種情況都有一個(gè)共同點(diǎn)，即這些導(dǎo)致綁定值發(fā)生改變的事件都是異步發(fā)生的。

Angular并不是捕捉對(duì)象的變動(dòng)，它采用的是在適當(dāng)?shù)臅r(shí)機(jī)去檢驗(yàn)對(duì)象的值是否被改動(dòng)，這個(gè)時(shí)機(jī)就是這些異步事件的發(fā)生。

這個(gè)時(shí)機(jī)是由 NgZone 這個(gè)服務(wù)去掌控的，它獲取到了整個(gè)應(yīng)用的執(zhí)行上下文，能夠?qū)ο嚓P(guān)的異步事件發(fā)生、完成或者異常等進(jìn)行捕獲，然后驅(qū)動(dòng) Angular 的變化監(jiān)測(cè)機(jī)制執(zhí)行。

通過上面的介紹，我們大致明白了變化檢測(cè)是如何被觸發(fā)的，那么 Angular 中的變化監(jiān)測(cè)是如何執(zhí)行的呢？

首先我們需要知道的是，對(duì)于每一個(gè)組件，都有一個(gè)對(duì)應(yīng)的變化監(jiān)測(cè)器；即每一個(gè) Component 都對(duì)應(yīng)有一個(gè)changeDetector，我們可以在 Component 中通過依賴注入來獲取到changeDetector。

而我們的多個(gè) Component 是一個(gè)樹狀結(jié)構(gòu)的組織，由于一個(gè) Component 對(duì)應(yīng)一個(gè)changeDetector，那么changeDetector之間同樣是一個(gè)樹狀結(jié)構(gòu)的組織。

最后我們需要記住的一點(diǎn)是，每次變化監(jiān)測(cè)都是從 Component 樹根開始的。

子組件：

@Component({
  selector: "demo-child",
  template: `
    
{{title}}
    
{{paramOne}}
    
{{paramTwo}}
  `
})
export class DemoChildComponent {
    title: string = "子組件標(biāo)題";
    @Input() paramOne: any; // 輸入屬性1
    @Input() paramTwo: any; // 輸入屬性2
}

父組件：

@Component({
  selector: "demo-parent",
  template: `
    
{{title}}
    
    change name
  `
})
export class DemoParentComponent {
    title: string = "父組件標(biāo)題";
    paramOneVal: any = "傳遞給paramOne的數(shù)據(jù)";
    paramTwoVal: any = "傳遞給paramTwo的數(shù)據(jù)";
    
    changeVal() {
        this.paramOneVal = "改變之后的傳遞給paramOne的數(shù)據(jù)";
    }
}

上面的代碼中，DemoParentComponent 通過 標(biāo)簽嵌入了 DemoChildComponent，從樹狀結(jié)構(gòu)上來說，DemoParentComponent 是 DemoChildComponent 的根節(jié)點(diǎn)，而 DemoChildComponent 是 DemoParentComponent 的葉子節(jié)點(diǎn)。

當(dāng)我們點(diǎn)擊 DemoParentComponent 的 button 時(shí)，會(huì)回調(diào)到 changeVal 方法，然后會(huì)觸發(fā)變化監(jiān)測(cè)的執(zhí)行，變化監(jiān)測(cè)流程如下：

首先變化檢測(cè)從 DemoParentComponent 開始：

檢測(cè) title 值是否發(fā)生了變化：沒有發(fā)生變化

檢測(cè) paramOneVal 值是否發(fā)生了變化：發(fā)生了變化（點(diǎn)擊按鈕調(diào)用changeVal()方法改變的）

檢測(cè) paramTwoVal 值是否發(fā)生了變化：沒有發(fā)生變化

然后變化檢測(cè)進(jìn)入到葉子節(jié)點(diǎn) DemoChildComponent：

檢測(cè) title 值是否發(fā)生了改變：沒有發(fā)生變化

檢測(cè) paramOne 是否發(fā)生了變化：發(fā)生了改變（由于父組件的屬性paramOneVal發(fā)生了改變）

檢測(cè) paramTwo 是否發(fā)生了改變：沒有發(fā)生變化

最后，因?yàn)?DemoChildComponent 再也沒有了葉子節(jié)點(diǎn)，所以變化監(jiān)測(cè)將更新DOM，同步視圖與模型之間的變化。

學(xué)習(xí)了變化監(jiān)測(cè)的處理機(jī)制之后，你可能會(huì)想，這機(jī)制未免也有點(diǎn)太簡單粗暴了吧，假如我的應(yīng)用中有成百上千個(gè) Component，隨便一個(gè) Component 觸發(fā)了監(jiān)測(cè)，那么都需要從根節(jié)點(diǎn)到葉子節(jié)點(diǎn)重新檢測(cè)一遍。

別著急，Angular 的開發(fā)團(tuán)隊(duì)已經(jīng)考慮到了這個(gè)問題，上述的檢測(cè)機(jī)制只是一種默認(rèn)的檢測(cè)機(jī)制，Angular 還提供一種 OnPush 的檢測(cè)機(jī)制（設(shè)置元數(shù)據(jù)屬性 changeDetection: ChangeDetectionStrategy.OnPush）。

OnPush 與 Default 之間的差別：當(dāng)檢測(cè)到與子組件輸入綁定的值沒有發(fā)生改變時(shí)，變化檢測(cè)就不會(huì)深入到子組件中去。

上面說到我們可以修改組件元數(shù)據(jù)屬性 changeDetection 來修改組件的變化監(jiān)測(cè)策略（ChangeDetectionStrategy.Default 或 ChangeDetectionStrategy.OnPush），除了這個(gè)，我們還可以使用 ChangeDetectorRef 來更加靈活的控制組件的變化監(jiān)測(cè)。

Angular 在整個(gè)運(yùn)行期間都會(huì)為每一個(gè)組件創(chuàng)建 ChangeDetectorRef 的實(shí)例，該實(shí)例提供了相關(guān)方法來手動(dòng)管理變化監(jiān)測(cè)。有了這個(gè)類，我們自己就可以自定義組件的變化監(jiān)測(cè)策略了，如停止/啟用變化監(jiān)測(cè)或者按指定路徑變化監(jiān)測(cè)等等。

相關(guān)方法如下：

markForCheck()：把根組件到該組件之間的這條路徑標(biāo)記起來，通知Angular在下次觸發(fā)變化監(jiān)測(cè)時(shí)必須檢查這條路徑上的組件。

detach()：從變化監(jiān)測(cè)樹中分離變化監(jiān)測(cè)器，該組件的變化監(jiān)測(cè)器將不再執(zhí)行變化監(jiān)測(cè)，除非再次手動(dòng)執(zhí)行reattach()方法。

reattach()：把分離的變化監(jiān)測(cè)器重新安裝上，使得該組件及其子組件都能執(zhí)行變化監(jiān)測(cè)。

detectChanges()：手動(dòng)觸發(fā)執(zhí)行該組件到各個(gè)子組件的一次變化監(jiān)測(cè)。

使用方法也很簡單，直接在組件中注入即可：

@Component({
  selector: "demo-parent",
  template: `
    
{{title}}
  `
})
export class DemoParentComponent implements OnInit {
    title: string = "組件標(biāo)題";
    
    constructor(public cdRef: ChangeDetectorRef) {}
    
    ngOnInit() {
        this.cdRef.detach(); // 停止組件的變化監(jiān)測(cè)，看需求使用不同的方法
    }
}