Angular更新机制（一）：Angular的生命周期

Angular更新机制（一）：Angular的生命周期

了解Angular的更新机制之前，首先需要了解Angular的每个生命周期

Angular的生命周期分为以下几个(按顺序进行调用)

ngOnChanges()  
ngOninit()
ngDoCheck()
ngAfterContentInit()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

ngOnChanges

首次构造组件的时候一定会调用。并且接收一个SimpleChange对象，包含了变换前后的值在这个生命周期时，@Input的属性值会在该生命周期赋给组件

• ngOnChanges只有在输入属性(@Input修饰的)变化时会调用该生命周期。
• 子组件的输入属性（基础数据类型）变化时触发这个钩子（引用类型属性变化时不会触发，引用类型会通过Angular的变化机制更新数据）
  

ngOninit

该生命周期在ngOnChanges之后，并且只会在组件的第一次ngOnChanges之后调用。一般在这个生命周期中来获取数据，减少构造函数的复杂性。

ngDoCheck

该生命周期，会在每次变化检测时调用。无论组件本身的数据是否发生了变化（每个异步事件都会触发组件的变化检测），每个变化周期ngDoCheck都会被调用。所以尽量不要在这个生命周期做很复杂的事情。

ngAfterContentInit

在组件中使用了<ng-content>嵌入了外部内容，Angular会在第一次ngDoCheck执行之后调用该生命周期，并且只调用一次

ngAfterContentChecked

与上面的ngAfterContentInit相对应，在组件中使用了<ng-content>嵌入了外部内容，第一次执行ngAfterContentInit之后和每次变化检测都会调用该生命周期。挺像ngDoCheck的。

• 当父组件和子组件都有投影内容时,会先执行父组件的ngAfterContentInit和ngAfterContentChecked之后，在执行子组件的这两个生命周期

ngAfterViewInit

Angular创建了组件的视图和子视图之后被调用（组件本身和所有的子组件渲染完成,已经呈现在页面上）

ngAfterViewChecked

第一次执行ngAfterViewInit和在每个变化检测都会被调用

• 当父组件和子组件都发生视图变化时,会先执行子组件的ngAfterViewInit和ngAfterViewChecked生命周期钩子,与contentInit和contnentChecked相反

ngOnDestroy

组件销毁前调用