Angular每個組件都存在一個生命周期，從創(chuàng)建，變更到銷毀。Angular提供組件生命周期鉤子，把這些關(guān)鍵時刻暴露出來，賦予在這些關(guān)鍵結(jié)點和組件進行交互的能力，掌握生命周期，可以讓我們更好的開發(fā)Angular應(yīng)用

概述

每個接口都有唯一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構(gòu)成的。比如，OnInit接口的鉤子方法叫做ngOnInit， Angular在創(chuàng)建組件后立刻調(diào)用它

生命周期執(zhí)行順序

ngOnChanges

在有輸入屬性的情況下才會調(diào)用，該方法接受當前和上一屬性值的SimpleChanges對象。如果有輸入屬性，會在ngOnInit之前調(diào)用。

ngOnInit

在組件初始化的時候調(diào)用，只調(diào)用一次，在第一次調(diào)用ngOnChanges之后調(diào)用

ngDoCheck

在組件定義的屬性或方法變更時調(diào)用(用于臟值之檢測，非常耗性能，因為會把所有的屬性和方法都檢測一遍），會在ngOnChanges()和ngOnInit()之后

ngAfterContentInit

在組件內(nèi)容初始化之后調(diào)用，在第一次ngDoCheck之后調(diào)用，只調(diào)用一次

ngAfterContentChecked

在組件每次檢查內(nèi)容放生變更時調(diào)用。在ngAfterContentInit和每次ngDoCheck之后調(diào)用

ngAfterViewInit

在組件相應(yīng)的視圖初始化之后調(diào)用，第一次ngAfterContentChecked之后調(diào)用，只調(diào)用一次

ngAfterViewChecked

在組件每次檢查視圖發(fā)生變更時調(diào)用。ngAfterViewInit和每次ngAfterContentChecked之后調(diào)用。

ngOnDestroy

在組件銷毀前調(diào)用，做一些清理工作，比如退訂可觀察對象和移除事件處理器，以免導(dǎo)致內(nèi)存泄漏。

上面代碼書寫是按順序的，看下面控制臺打印

現(xiàn)在我們鉤子函數(shù)的順序打亂，在看看代碼

控制臺輸出跟上面是一樣的

constructor和ngOnInit

constructor是ES6中class中新增的屬性，當class類實例化的時候調(diào)用constructor，來初始化類。Angular中的組件就是基于class類實現(xiàn)的，在Angular中，constructor用于注入依賴。

ngOnInit是Angular中生命周期的一部分，在constructor后執(zhí)行。在Angular中用于初始化變量和數(shù)據(jù)綁定等

NgChanges

當我們監(jiān)聽了OnChanges鉤子。 一旦檢測到該組件(或指令)的輸入屬性發(fā)生了變化，Agular就會調(diào)用ngOnChanges()方法

效果演示

DoCheck

當組件中屬性或函數(shù)發(fā)生變化時DoCheck會執(zhí)行臟值檢測，遍歷所有變量

效果演示

個人學(xué)習心得，大神路過，不喜勿噴😊，如果代碼有錯誤，歡迎糾正同時也歡迎交流

感謝閱讀，希望能幫助到大家，也希望大家多多支持腳本之家！

最新評論