Angular系列 -> 生命周期钩子及父子组件的生命周期调用的顺序

简介：

Angular 指令的生命周期，是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子，便于我们监控指令生命周期的变化，并执行相关的操作。

生命周期介绍: 

1. ngOnChanges:
   当数据绑定输入属性的值发生变化时;
   @input属性(输入属性)发生变化时;
2. ngOnInit
   在第一次 ngOnChanges 后调用
3. ngDoCheck
   自定义的方法，用于检测和处理值的改变
4. ngAfterContentInit
    在组件内容初始化之后调用
5. ngAfterContentChecked
   组件每次检查内容时调用
6. ngAfterViewInit
    组件相应的视图初始化之后调用
7. ngAfterViewChecked
   组件每次检查视图时调用
8. ngOnDestroy
   指令销毁前调用

【注】不要在视图钩子中改变数据（因为会导致循环调用），违反单向数据流。 要改用setTimeout，使得在下一轮JS 开始执行的时候触发

父子组件的生命周期调用的顺序

实验结果：

调用顺序：

constructor不是生命周期函数，但是作为构造函数，是第一个被调用的

参考链接：

https://juejin.cn/post/6844903933459038215