Angular 生命週期(Life cycle)

發表於 分類於 ， Disqus：
快速入門 Angular 生命週期

前言

主要有 8 個生命週期
若是用 cli 創建 Component，預設會自動在 class 帶上 implements OnInit ，但就算不寫也無妨，Angular會在相應的生命周期自動呼叫

因此若有需要用上生命週期時，也不必在 implements 後面把有用上的都補上，就直接寫在 class 裡面就行

可以的話仍建議寫的嚴謹，便於一眼快速掌握這component有使用到哪些生命週期
而在 implements 都有補上相關的生命週期的話，class 裡面用的名字就要跟implements後方的一致

Angular 生命周期

  1. constructor()
    • 即實例化這個 class，不算是生命周期
    • 用於初始化一些內部參數或依賴注入，不該有其他事務判斷
    • JavaScript 原生限制，constructor無法使用async, await。故也不適合在此處理事務
  2. ngOnChanges()
    • 有父子組件傳值時會觸發，若無父子組件，則跳到下一步
  3. ngOnInit()
    • 第一次顯示資料繫結和設定指令/元件的輸入屬性之後，初始化指令/元件
    • 在第一輪 ngOnChanges() 完成之後呼叫，只呼叫一次
    • 有請求資料的話，通常會放在這裡
  4. ngDoCheck()
    • 可以強迫檢測資料繫結的內容，放自己的邏輯來判斷內容後做相應操作
    • 緊跟在 ngOnChanges() 和 ngOnInit() 後面呼叫
  5. ngAfterContentInit()
    • 把外部內容傳入資料後呼叫，跟ngOnInit()相似
    • 第一次 ngDoCheck() 之後呼叫，只呼叫一次。
  6. ngAfterContentChecked()
    • 和ngDoCheck()很像，檢測完後，再放自己的邏輯判斷
    • ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫
  7. ngAfterViewInit()
    • 完成視圖渲染後觸發
    • 若有需要dom的操作，就放在這邊
    • 第一次 ngAfterContentChecked() 之後呼叫，只呼叫一次
  8. ngAfterViewChecked()
    • 相似於ngDoCheck()、ngAfterContentChecked()，可以做一些檢測
    • ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫
  9. ngOnDestroy()
    • 當組件銷毀時觸發，通常用於unsubcribe
    • 在 Angular 銷毀指令/元件之前呼叫

完整的首次啟動觸發流程

首次啟動組件
總共會觸發：0→(1)→2→3→4→5→6→7，即除了ngOnDestroy之外都有觸發
有父子組件時，才會觸發1.ngOnChanges，所以上述流程用()註記
接著會馬上再觸發所有的check (通常自定義的事務判斷都會寫在這裡)
(1. ngOnChanges)→3,ngDoCheck→5,ngAfterContentChecked→7,ngAfterViewChecked

接下來就是 user 操作而改變值時，才會再依序觸發 (1)→3→5→7 的 check 事務

關於生命周期的幾個大原則

  1. 所有init周期，只有首次加載時觸發一次。就再也不會被觸發
  2. 所有的check周期，在資料有變化時都會觸發，且順序皆為3→5→7，業務邏輯可寫在此處
  3. 若有subcribe，要記得在Destroy寫上unsubcribe，避免消耗系統資源