Angular学习笔记之--（1）生命周期篇

 首先来一张官网上的图，转于https://angular.cn/guide/lifecycle-hooks

/**
   * 执行顺序：
   * constructor：组件构造函数调用
   * ngOnChanges：组件输入属性 `@Input改变` 多次触发
   * ngOnInit：组件初始化
   * ngDoCheck: 框架层面做的变化检测 与ngOnChanges有重叠的地方，双方一般不同时出现 多次触发
   * ngAfterContentInit：组件内容初始化
   * ngAfterContentChecked：组件内容脏值检测 多次触发
   * ngAfterViewInit：组件视图初始化
   * ngAfterViewChecked：组件视图脏值检测 多次触发
   * ngOnDestroy：组件销毁，可以通过*ngIf注销组件
   *  
*/

constructor：构造函数调用，数据可能还没有初始化

ngOnChanges：组件输入属性@Input改变，数据发生变更就会触发，并且只显示发生改变的当前数据，返回一个对象，里面保存所有发生变更的数据，每个数据都有如下三个属性{currentValue: ";firstChange: true/false;previousValue: ''

ngOnInit：数据初始化完毕

ngDoCheck：与ngOnChanges功能有重合，ngOnChanges检测的是当前组件的属性，ngDoCheck是框架层面做的变化检测

ngAfterContentInit：组件内容初始化！类似于vue的slot插槽用法，在自定义组件内部使用<ng-content></ng-content>来显示<home-scroll>这里的额外内容</home-scroll>

ngAfterContentChecked：在ngAfterContentInit之后触发，内容脏值检测

ngAfterViewInit：组件视图初始化，是一个做安全的Dom操作的地方

ngAfterViewChecked：组件视图脏值检测

ngOnDestroy：组件销毁时触发