## 生命周期 我們把一個組件由出生到死亡的整個過程，稱為組件的**生命周期**，其實無論使用什么技術**生命周期**都是核心需要通過不斷的實踐重點掌握和理解的部分。 angular組件在前期大體是如下構建的：? 執行構造函數，實例化組件實例；? 解析V層代碼；? 解析在V層中使用的變量。 在使用`ng t`對模塊進行獨立開發時，我們能更好地體驗到angular組件的構建過程。過程??是在創建組件時自動執行的，對應`app.component.spec.ts`中的以下代碼： ```typescript it('should create the app', () => { // ?? 創建組件并解析V層代碼 const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; // 當組件被成功初始化時，以下語句正常執行；失敗時，以下語句將報一個異常。 expect(app).toBeTruthy(); }); ``` 而過程?則需要執行以下代碼來觸發： ```typescript it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app).toBeTruthy(); // 啟用angular的自動變更檢測機制，自動對V層中的數據進行渲染 fixture.autoDetectChanges(); ?? }); ``` * ?? 自動解析在V層中使用到的變量  `autoDetectChanges`的字面意思是`自動檢測變更`，當它被啟用時angular會智能的感知到組件中的值發生了變化，近而重新對V層中的變量進行解析。 在`ng t`的情況下，angular將是否啟用這個`自動感知組件中的值發生變化`的權利交給了我們。如果想讓其生效，則僅需要在組件初始化后加入`fixture.autoDetectChanges();`即可。 >[info] 我們把對V層中的變量進行解析的操作叫做`渲染`。廣義上來講，我們把一種數據格（形）式按一定規則轉換為另一種數據格（形）式的操作叫做`渲染`。 ## ng serve 通過上面的學習相信大家也猜測試到了，看字面意思`ng serve`的目的是啟用angular服務，在該模式下angular將`自動感知組件中的值發生變化`默認啟用了，這個過程對我們來講變成了透明無感知的，所以C層中的 `teachers`被自動的顯示在V層中。 在整個開發的過程中，我們更愿意使用`ng t`來單獨開發某個模塊，因為這不依賴于其它的環境，特別是當我們面臨一個稍大前臺的時候，或者是前臺在開發時嚴重的依賴于后臺的時候，使用`ng t`來開發都會取得事半功倍的效果。 但不得不說的是，`ng t`在處理組件嵌套過程中有時候并不理想。這還需要我們在數據校驗、API數據模擬等方面下更多的功夫。但使用`ng t`來開發仍然是不二之選。它不僅能夠讓我們更清晰的掌握組件的變化細節從而更加深入的了解Angular的工作機制，而且對代碼質量、軟件工程思想的理解、前沿技術的掌握都會有不同程度的提升。 # 資源列表 | 名稱 | 地址 | |---- | ---- | | 組件生命周期 | [https://www.angular.cn/guide/lifecycle-hooks](https://www.angular.cn/guide/lifecycle-hooks) | | 測試簡介 | [https://www.angular.cn/guide/testing](https://www.angular.cn/guide/testing) | | 測試工具API | [https://www.angular.cn/guide/testing-utility-apis](https://www.angular.cn/guide/testing-utility-apis) | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.1.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.1.2.zip)