什麼是變更檢測？聊聊angular的變更機制

什麼是變更偵測？以下這篇文章帶大家聊聊Angular中的變更偵測機制，介紹一下狀態變化如何通知變更偵測、Angular變更偵測策略，希望對大家有幫助。

一、什麼是變更偵測

• #概括： 一種變更偵測機制，用於遍歷元件樹，檢查每個元件的變化，並在元件屬性變化的時候觸發DOM的更新。 【相關教學推薦：《angular教學》】
• 變更偵測的基本任務：取得程式的內部狀態並使之在使用者介面可見。這個狀態可以是任何的物件、陣列、基本資料型別。

二、什麼引起了變更

事件驅動，來源有以下三大類別:

• 事件：頁面click、submit、mouse down……
• XHR：從後端伺服器拿到資料
• Timers：setTimeout()、setInterval()

這幾點有一個共同點，就是它們都是異步的，也就是說，所有的異步操作是可能導致資料變化的根源因素，所以每當執行一些非同步操作時，我們的應用程式狀態可能會改變，而這時則需要去更新視圖

三、狀態變化怎麼通知變更偵測

在Angular當中則接入了NgZone，由它來監聽Angular所有的非同步事件，Angular 在啟動時會重寫（透過Zone.js）部分底層瀏覽器API （暴力的攔截了所有的非同步事件）。

常見的有兩種方式來觸發變化檢測，一種方法是基於組件的生命週期鉤子

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一種方法是手動控制變化檢測的打開或關閉，並手動觸發

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 變更偵測

#Angular 的核心是元件化，元件的巢狀會使得最終形成一棵元件樹 ，Angular 的變化檢測可以分組件進行，每個組件都有對應的變化檢測器ChangeDetector，可想而知這些變化檢測器也會構成一棵樹。
在 Angular 中每個元件都有自己的變化偵測器，這使得我們可以對每個元件分別控制如何以及何時進行變更偵測。

四、變更偵測策略

Angular也讓開發者擁有客製化變更偵測策略的能力。

• default: 每次變更偵測都會引起元件的變更偵測，包括其他元件的狀態變化，以及本元件引用型變數內部屬性值變化
• Onpush: 每次變更偵測會跳過本元件的變更檢查，除非滿足一些條件

##4.1 default

Angular 預設的變更偵測機制是

ChangeDetectionStrategy.Default，每次非同步事件callback 結束後，NgZone會觸發整個元件樹 至上而下做變化偵測

4.2 onPush<span style="font-size: 18px;"></span>

OnPush 策略，用以
• 跳過某個component 以及它下面所有子組件的變化檢測
其實在設定了
• OnPush 策略以後，還是有許多方法可以觸發變更偵測的；1）元件的
@Input
• 屬性的引用發生改變。

2）元件內的

DOM 事件，包含它子元件的 DOM 事件，例如 click、submit、mouse down

。

• 3）元件內的 Observable 訂閱事件，同時設定 Async pipe。 4）元件內手動使用ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

#########################################################################。變化偵測物件參考############markForCheck()：使用於###子元件###，將###該子元件到根元件###之間的路徑標記起來，通知angular 偵測器下次變更偵測時###一定###檢查此路徑上的元件，即使設定了變更偵測策略為###onPush#########detectChanges()：手動發起###該元件到各個子元件###的變更偵測######detach()：將元件的偵測器從偵測器數中###脫離###，不再受偵測機制的控制，除非重新attach 上######reattach()：把脫離的檢測器###重新鏈接###到檢測器樹上########更多編程相關知識，請訪問：###程式設計影片###！ ！ ###

以上是什麼是變更檢測？聊聊angular的變更機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！