![37d6c77c38d9259752b083536a7af50e.png](https://i-blog.csdnimg.cn/blog_migrate/b0ea9bbe1e8a63e3216e9d1cf0903e5f.jpeg)
![a74ba957f2028cfd533fa5dd78e3b037.png](https://i-blog.csdnimg.cn/blog_migrate/805d8ae8b335cc0b762b33a5987557e2.jpeg)
在日常开发中,除了constructor我们经常用到的只有这四个生命周期:ngOnchanges()、 ngOnInit()、ngAfterViewInit()、ngOnDestroy()、
先看如图:
![e7e3e8e072a2317b212e4f8541b7165e.png](https://i-blog.csdnimg.cn/blog_migrate/cce1809694dd9e43bf10be71b8fc6aba.jpeg)
整个的页面是父组件,右侧的操作弹窗是个子组件
现在我们分别在父子组件的上述五个生命周期中写入console.log,看一下打印顺序。
/*父组件*/
constructor() {
console.log('父组件constructor');
}
ngOnChanges(){
console.log('父组件ngOnchanges');
}
ngOnDestroy(){
console.log('父组件ngOnDestroy');
}
ngOnInit() {
console.log('父组件ngOnInit');
}
ngAfterViewInit() {
console.log('父组件ngAfterViewInit');
}
/*子组件*/
constructor() {
console.log('子组件constructor');
}
ngOnChanges() {
console.log('子组件ngOnchanges');
}
ngOnDestroy() {
console.log('子组件ngOnDestroy');
}
ngOnInit() {
console.log('子组件ngOnInit');
}
ngAfterViewInit() {
console.log('子组件ngAfterViewInit');
}