agular6.x生命周期个人理解

文章参考

1. angular——生命周期函数

钩子函数介绍

1. 只调用一次的&＃xff0c;我们通常可以用于初始化
2. 构造函数不要处理一些业务逻辑&＃xff0c;因为此时的HTML还没有创建挂载
3. ngAfterViewInit() 这个阶段可以对DOM节点进行数据和事件绑定

组件声明周期

1. 左侧的图是初始化执行的声明周期顺序
2. 右侧的图是数据发生变化&＃xff0c;检测数据变化发生的钩子函数

构造函数

1. 组件运行的最早的函数&＃xff0c;比任何一个生命周期函数要早
2. 用于依赖注入service等组件
3. 变量的初始化

必须掌握的

ngOnInit

1. 构造函数之后马上执行复杂的初始化逻辑
2. 在Angular设置完输入属性之后&＃xff0c;对该组件进行准备
3. 此时的HTML还没有挂载

ngAfterViewInit

1. 组件试图及其子试图初始化完成之后执行的方法
2. 第一次 ngAfterContentChecked() 之后调用&＃xff0c;只调用一次。
3. html已经挂载&＃xff0c;我们要操作DOM 节点&＃xff0c;应该在这个方法中执行

ngOnDestroy

1. 在 Angular 销毁指令/组件之前调用。
2. 作用&＃xff0c;防止内存溢出&＃xff0c;应用场景&＃xff1a;
   a). 组件初始化有定时器&＃xff0c;组件销毁前&＃xff0c;清空定时器&＃xff0c;防止内存溢出
   b). window.onresize 等对window绑定的事件&＃xff0c; 组件销毁前&＃xff0c;删除定义的事件&＃xff0c;防止内存溢出

需要了解的

ngDoCheck

1. 发生 Angular 无法或不愿意自己检测的变化时作出反应。
2. 在每个 Angular 变更检测周期中调用&＃xff0c;ngOnChanges() 和 ngOnInit() 之后。

ngAfterContentChecked

1. 每次完成被投影组件内容的变更检测之后调用。
2. ngAfterContentInit() 和每次 ngDoCheck() 之后调用。

ngAfterViewChecked

1. 每次做完组件视图和子视图的变更检测之后调用。
2. ngAfterViewInit()和每次 ngAfterContentChecked() 之后调用

ngOnChange

1. 当 Angular&＃xff08;重新&＃xff09;设置数据绑定输入属性时响应
2. 该方法接受当前和上一属性值的 SimpleChanges 对象当被绑定的输入属性的值发生变化时调用&＃xff0c;首次调用一定会发生在 ngOnInit() 之前。

只用于父子组件之间