Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用
概述
每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它
![img_5504f0716851ad32fa3b05dd9d70166b.png](https://yqfile.alicdn.com/img_5504f0716851ad32fa3b05dd9d70166b.png?x-oss-process=image/resize,w_1400/format,webp)
生命周期执行顺序
ngOnChanges
在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在ngOnInit之前调用。
ngOnInit
在组件初始化的时候调用,只调用一次,在第一次调用ngOnChanges之后调用
ngDoCheck
在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),会在ngOnChanges()和ngOnInit()之后
ngAfterContentInit
在组件内容初始化之后调用,在第一次ngDoCheck之后调用,只调用一次
ngAfterContentChecked
在组件每次检查内容放生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用
ngAfterViewInit
在组件相应的视图初始化之后调用,第一次ngAfterContentChecked之后调用,只调用一次
ngAfterViewChecked
在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。
ngOnDestroy
在组件销毁前调用,做一些清理工作,比如退订可观察对象和移除事件处理器,以免导致内存泄漏。
![img_c4e804c0ff773b8302fce2878034a6be.png](https://yqfile.alicdn.com/img_c4e804c0ff773b8302fce2878034a6be.png?x-oss-process=image/resize,w_1400/format,webp)
上面代码书写是按顺序的,看下面控制台打印
![img_9e658ffedecede613e3b5cabf7bdc42b.jpe](https://yqfile.alicdn.com/img_9e658ffedecede613e3b5cabf7bdc42b.jpeg?x-oss-process=image/resize,w_1400/format,webp)
现在我们钩子函数的顺序打乱,在看看代码
![img_eac9b7b99357a6874776525a173a0f35.jpe](https://yqfile.alicdn.com/img_eac9b7b99357a6874776525a173a0f35.jpeg?x-oss-process=image/resize,w_1400/format,webp)
控制台输出跟上面是一样的
![img_033a76daffe9b4ecd0d6378a6a774b80.jpe](https://yqfile.alicdn.com/img_033a76daffe9b4ecd0d6378a6a774b80.jpeg?x-oss-process=image/resize,w_1400/format,webp)
constructor和ngOnInit
constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor,来初始化类。Angular中的组件就是基于class类实现的,在Angular中,constructor用于注入依赖。
![img_856bdac5bc0a61dc8c1924dedb527920.jpe](https://yqfile.alicdn.com/img_856bdac5bc0a61dc8c1924dedb527920.jpeg?x-oss-process=image/resize,w_1400/format,webp)
ngOnInit是Angular中生命周期的一部分,在constructor后执行。在Angular中用于初始化变量和数据绑定等
![img_0cf97ca052318d9734c7e883fdd9cece.png](https://yqfile.alicdn.com/img_0cf97ca052318d9734c7e883fdd9cece.png?x-oss-process=image/resize,w_1400/format,webp)
NgChanges
当我们监听了OnChanges钩子。 一旦检测到该组件(或指令)的输入属性发生了变化,Agular就会调用ngOnChanges()方法
![img_81bb5dbc8f060e0bebab342aa094f80e.jpe](https://yqfile.alicdn.com/img_81bb5dbc8f060e0bebab342aa094f80e.jpeg?x-oss-process=image/resize,w_1400/format,webp)
效果演示
![img_c3c180e4d6edf5e2ba742a8de0ab4d04.gif](https://yqfile.alicdn.com/img_c3c180e4d6edf5e2ba742a8de0ab4d04.gif)
DoCheck
当组件中属性或函数发生变化时DoCheck会执行脏值检测,遍历所有变量
![img_df949708abf5dcad08090205fbe00912.jpe](https://yqfile.alicdn.com/img_df949708abf5dcad08090205fbe00912.jpeg?x-oss-process=image/resize,w_1400/format,webp)
效果演示
![img_6c006ee89b7eb9c1fedcddb02cfb7ea5.gif](https://yqfile.alicdn.com/img_6c006ee89b7eb9c1fedcddb02cfb7ea5.gif)