Angular更新機(jī)制(一):Angular的生命周期

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)用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市呜象,隨后出現(xiàn)的幾起案子膳凝,更是在濱河造成了極大的恐慌,老刑警劉巖恭陡,帶你破解...
    沈念sama閱讀 212,029評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹬音,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡休玩,警方通過查閱死者的電腦和手機(jī)著淆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拴疤,“玉大人永部,你說我怎么就攤上這事∧欧” “怎么了苔埋?”我有些...
    開封第一講書人閱讀 157,570評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蜒犯。 經(jīng)常有香客問我组橄,道長(zhǎng),這世上最難降的妖魔是什么罚随? 我笑而不...
    開封第一講書人閱讀 56,535評(píng)論 1 284
  • 正文 為了忘掉前任玉工,我火速辦了婚禮,結(jié)果婚禮上毫炉,老公的妹妹穿的比我還像新娘瓮栗。我一直安慰自己,他們只是感情好瞄勾,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,650評(píng)論 6 386
  • 文/花漫 我一把揭開白布费奸。 她就那樣靜靜地躺著,像睡著了一般进陡。 火紅的嫁衣襯著肌膚如雪愿阐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,850評(píng)論 1 290
  • 那天趾疚,我揣著相機(jī)與錄音缨历,去河邊找鬼以蕴。 笑死,一個(gè)胖子當(dāng)著我的面吹牛辛孵,可吹牛的內(nèi)容都是我干的丛肮。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼魄缚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼宝与!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起冶匹,我...
    開封第一講書人閱讀 37,747評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤习劫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后嚼隘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诽里,經(jīng)...
    沈念sama閱讀 44,207評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,536評(píng)論 2 327
  • 正文 我和宋清朗相戀三年飞蛹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了谤狡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,683評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡桩皿,死狀恐怖豌汇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情泄隔,我是刑警寧澤,帶...
    沈念sama閱讀 34,342評(píng)論 4 330
  • 正文 年R本政府宣布宛徊,位于F島的核電站佛嬉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏闸天。R本人自食惡果不足惜暖呕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,964評(píng)論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望苞氮。 院中可真熱鬧湾揽,春花似錦、人聲如沸笼吟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)贷帮。三九已至戚揭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間撵枢,已是汗流浹背民晒。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工精居, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人潜必。 一個(gè)月前我還...
    沈念sama閱讀 46,401評(píng)論 2 360
  • 正文 我出身青樓靴姿,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親磁滚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子佛吓,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,566評(píng)論 2 349