angular 生命周期钩子函数

喜欢ヅ旅行 2022-03-19 04:48 355阅读 0赞

**生命周期执行顺序**  
**1.ngOnChanges**

在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性，会在ngOnInit之前调用。

**2.ngOnInit**

在组件初始化的时候调用，只调用一次，在第一次调用ngOnChanges之后调用

**3.ngDoCheck**

在组件定义的属性或方法变更时调用(用于脏值检测，非常耗性能，因为会把所有的属性和方法都检测一遍），会在ngOnChanges()和ngOnInit()之后调用

**4.ngAfterContentInit**

在组件内容初始化之后调用，在第一次ngDoCheck之后调用，只调用一次

**5.ngAfterContentChecked**  
在组件每次检查内容发生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用

**6.ngAfterViewInit**

在组件相应的视图初始化之后调用，第一次ngAfterContentChecked之后调用，只调用一次

**7.ngAfterViewChecked**

在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

**8.ngOnDestroy**

在组件销毁前调用，做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄漏。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220319/a6b7dda21dfa419a92245f22182079a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220319/1965ee090af44572a64a640d55739070.png

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关生命周期和钩子函数

生命周期和钩子函数图示详解实例图示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

电玩女神/ 2023年10月05日 13:22/ 0 赞/ 28 阅读

相关 vue生命周期和钩子函数

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

r囧r小猫/ 2022年12月12日 15:22/ 0 赞/ 234 阅读

相关 Vue生命周期的钩子函数

Vue生命周期的钩子函数目录 Vue生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log

雨点打透心脏的1/2处/ 2022年10月26日 14:18/ 0 赞/ 328 阅读

相关 angular生命点接口生命周期钩子

<table> <thead> <tr> <th>生命点接口</th> <th align="center">周期钩子</th> <th al

布满荆棘的人生/ 2022年05月14日 02:13/ 0 赞/ 259 阅读

相关 angular 生命周期钩子函数

生命周期执行顺序 1.ngOnChanges 在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性，会在ngOnIni

喜欢ヅ旅行/ 2022年03月19日 04:48/ 0 赞/ 356 阅读

相关 React的生命周期钩子函数

一、React的生命周期钩子函数旧版 1. 挂载时，初始化阶段 1）`constructor()` : 如果不初始化state或不进行方法绑定，则不需要为rea

灰太狼/ 2021年11月01日 10:38/ 0 赞/ 509 阅读

相关 Angular 学习（九）：Angular 组件生命周期钩子

Angular 组件生命周期钩子 ![生命周期][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

我会带着你远行/ 2021年09月29日 01:50/ 0 赞/ 522 阅读

相关生命周期（钩子函数）

生命周期（钩子函数）一、生命周期过程解释 > 实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前

Bertha 。/ 2021年09月15日 14:50/ 0 赞/ 478 阅读

相关 Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：[点击前往][Link 1] Vue钩子函数官方文档：[点击前往][Link 2

矫情吗；*/ 2021年07月25日 15:39/ 0 赞/ 590 阅读

相关 Vue生命周期钩子函数

一点睛 1 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个

小灰灰/ 2021年07月24日 21:58/ 0 赞/ 561 阅读