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

概述

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

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

ngOnChanges

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

ngOnInit

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

ngDoCheck

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

ngAfterContentInit

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

ngAfterContentChecked

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

ngAfterViewInit

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

ngAfterViewChecked

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

ngOnDestroy

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

上面代碼書(shū)寫(xiě)是按順序的，看下面控制臺(tái)打印

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

控制臺(tái)輸出跟上面是一樣的

constructor和ngOnInit

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

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

NgChanges

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

效果演示

DoCheck

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

效果演示

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

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

最新評(píng)論