Angular生命周期

Angular生命周期与Vue的生命周期十分类似，主要包括以下几个阶段：

1.实例化：创建一个新的组件或指令

2.挂载：将组件或指令插入到视图中

3.更新：Angular检测到输入属性的变化，更新数据绑定

4.销毁：组件或指令被移除出视图

一、生命周期的钩子函数

Angular的生命周期钩子函数包括：

constructor(myService: MyService, ...) { ... }

在任何其它生命周期钩子之前调用。可以用它来注入依赖项，但不要在这里做正事。

ngOnChanges(changeRecord) { ... }

每当输入属性发生变化时就会调用，但位于处理内容（ng-content）或子视图之前。

ngOnInit() { ... }

在调用完构造函数、初始化完所有输入属性并首次调用过ngOnChanges之后调用。

ngDoCheck() { ... }

每当对组件或指令的输入属性进行变更检测时就会调用。可以用它来扩展变更检测逻辑，执行自定义的检测逻辑。

ngAfterContentInit() { ... }

ngOnInit完成之后，当组件或指令的内容（ng-content）已经初始化完毕时调用。

ngAfterContentChecked() { ... }

每当组件或指令的内容（ng-content）做变更检测时调用。

ngAfterViewInit() { ... }

当ngAfterContentInit完毕，并且组件的视图及其子视图或指令所属的视图已经初始化完毕时调用。

ngAfterViewChecked() { ... }

当组件的视图及其子视图或指令所属的视图每次执行变更检测时调用。

ngOnDestroy() { ... }

只在实例被销毁前调用一次。

二、主要的钩子函数

2.1 ngOnInit()

在平时项目开发中，主要用到的钩子函数就包括ngOnInit()，这里用于初始化数据或者获取一些基础数据。

2.2 ngOnChanges()

ngOnChanges()用于监测@Input输入数据的变化，变化一次调用一次，如果没有@Input传入数据，则不调用该钩子函数，但是由于调用频繁，请谨慎使用。

2.3 ngAfterViewInit()

该指令在页面视图初始化完毕之后调用，可以用来获取dom元素以及相关操作，例如使用@viewChild获取的页面元素。

总结

钩子函数就类似事件发生过程中的一个一个节点，我们需要了解它的执行过程和时机，这样才能在正确的时机做正确的事。初学者，欢迎补充指正！