Angular更新機(jī)制(一):Angular的生命周期
了解Angular的更新機(jī)制之前躺苦,首先需要了解Angular的每個(gè)生命周期
Angular的生命周期分為以下幾個(gè)(按順序進(jìn)行調(diào)用)
ngOnChanges()
ngOninit()
ngDoCheck()
ngAfterContentInit()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
ngOnChanges
首次構(gòu)造組件的時(shí)候一定會(huì)調(diào)用。并且接收一個(gè)SimpleChange對(duì)象寒亥,包含了變換前后的值在這個(gè)生命周期時(shí)踩窖,@Input的屬性值會(huì)在該生命周期賦給組件
- ngOnChanges只有在輸入屬性(@Input修飾的)變化時(shí)會(huì)調(diào)用該生命周期异赫。
- 子組件的輸入屬性(基礎(chǔ)數(shù)據(jù)類型)變化時(shí)觸發(fā)這個(gè)鉤子(引用類型屬性變化時(shí)不會(huì)觸發(fā)泊业,引用類型會(huì)通過Angular的變化機(jī)制更新數(shù)據(jù))
ngOninit
該生命周期在ngOnChanges之后颅眶,并且只會(huì)在組件的第一次ngOnChanges之后調(diào)用油讯。一般在這個(gè)生命周期中來(lái)獲取數(shù)據(jù)详民,減少構(gòu)造函數(shù)的復(fù)雜性。
ngDoCheck
該生命周期陌兑,會(huì)在每次變化檢測(cè)時(shí)調(diào)用沈跨。無(wú)論組件本身的數(shù)據(jù)是否發(fā)生了變化(每個(gè)異步事件都會(huì)觸發(fā)組件的變化檢測(cè))
,每個(gè)變化周期ngDoCheck都會(huì)被調(diào)用兔综。所以盡量不要在這個(gè)生命周期做很復(fù)雜的事情饿凛。
ngAfterContentInit
在組件中使用了<ng-content>嵌入了外部?jī)?nèi)容隅俘,Angular會(huì)在第一次ngDoCheck執(zhí)行之后調(diào)用該生命周期,并且只調(diào)用一次
ngAfterContentChecked
與上面的ngAfterContentInit相對(duì)應(yīng)笤喳,在組件中使用了<ng-content>嵌入了外部?jī)?nèi)容为居,第一次執(zhí)行ngAfterContentInit之后和每次變化檢測(cè)都會(huì)調(diào)用該生命周期。挺像ngDoCheck的杀狡。
當(dāng)父組件和子組件都有投影內(nèi)容時(shí),會(huì)先執(zhí)行父組件的ngAfterContentInit和ngAfterContentChecked之后蒙畴,在執(zhí)行子組件的這兩個(gè)生命周期
ngAfterViewInit
Angular創(chuàng)建了組件的視圖和子視圖之后被調(diào)用(組件本身和所有的子組件渲染完成,已經(jīng)呈現(xiàn)在頁(yè)面上)
ngAfterViewChecked
第一次執(zhí)行ngAfterViewInit和在每個(gè)變化檢測(cè)都會(huì)被調(diào)用
當(dāng)父組件和子組件都發(fā)生視圖變化時(shí),會(huì)先執(zhí)行子組件的ngAfterViewInit和ngAfterViewChecked生命周期鉤子,與contentInit和contnentChecked相反
ngOnDestroy
組件銷毀前調(diào)用