Week 09 · Day 01 — Change Detection（變更偵測）概論
學習目標
- 理解 Angular 的變更偵測機制
- 認識預設策略 Default
- 了解何時需要優化
重點
什麼是 Change Detection - Angular 定期「檢查狀態是否變了」，若變了就更新畫面 - 時間點：任何事件（點按、輸入、setTimeout、HTTP 完成等） - 預設從根元件往下檢查所有元件（會比較耗能）
兩大策略
| 策略 | 說明 |
|------|------|
| Default | 每次都會檢查整個元件樹（預設） |
| OnPush | 只在特定條件發生時才檢查（較省） |
Default 行為 - 任何事件都觸發全樹重新檢查 - 小應用沒問題；元件多時可能浪費
怎麼觀察
- 在每個元件某個方法裡放 console.log，看它被呼叫的次數
- 你在一個輸入框打字，所有元件的方法可能都被觸發 → 即是 Default 的檢查
暗示優化時機 - 畫面明顯卡頓 - 元件樹大、頻繁更新 - 大量純顯示元件（無自訂事件）
實作
- 建立 2–3 個元件，各放
ngDoCheck()並console.log - 在其中一個輸入框打字
- 觀察其他元件是否也一直在檢查
作業
- 說明 Default 變更偵測的行為
- 實際觀察打字時所有元件被檢查
- 判斷自己的元件樹是否適合優化