## 生命周期 我们把一个组件由出生到死亡的整个过程，称为组件的**生命周期**，其实无论使用什么技术**生命周期**都是核心需要通过不断的实践重点掌握和理解的部分。 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)