來自 https://www.jianshu.com/p/72b704b5c9ed
收藏一波先
1.認識ionic的生命週期鉤子
截至ionic 3.8.0版本，框架提供了8個鉤子函數，它們分別會在頁面生命週期的各個階段被觸發，我們來簡單瞭解一下。
1.1 ionViewDidLoad
頁面加載完成觸發，這裏的“加載完成”指的是頁面所需的資源已經加載完成，但還沒進入這個頁面的狀態（用戶看到的還是上一個頁面）。
需要注意的是它是一個很傲嬌的鉤子，全程只會調用一次，即第一次進入頁面時被調用，此後你無論怎樣進進出出它都冷冷清清悽悽慘慘慼戚不再理你了。除非你把它的後臺殺了，重新進入這個軟件（在網頁調試的時候按刷新也是可以的）。
因此這個鉤子適合你做一些一次性的處理，比如從服務器拉取用戶數據存到緩存中。
1.2 ionViewWillEnter
字面意義理解就是“我要進來了”的那一刻，這個時候頁面剛剛開始切換。你可以在這時對頁面的數據進行預處理，這個鉤子是每次都會調用的。
1.3 ionViewDidEnter
當這個鉤子被觸發的時候，用戶已經進入到新頁面了（頁面處於激活狀態），同樣也是每次都會調用。
說到這我不得不插一句，ionic對鉤子的命名對廣大中國學生真是友好啊，一個will一個did就把事情解決了。不像外邊某些妖豔（誤）的框架，一堆ready, update, complied, destory什麼的，記一次忘一次。（當然這是一個玩笑，組件的命名跟框架的運行機制是息息相關的）
1.4 ionViewWillLeave
頁面準備 (is about to) 離開時觸發，這時用戶剛剛觸發了返回按鈕或者相關的事件。
1.5 ionViewDidLeave
頁面已經 (has finished) 離開時觸發，頁面處於非激活狀態了。
1.6 ionViewWillUnload
頁面中的資源即將被銷燬時觸發，此刻你是否會猜測這個鉤子與ionViewDidLoad一樣，只會被觸發一次呢？
1.7 試驗
我們直接利用上一節制作的頁面，對鉤子的加載做一個測試。 上一節，我們實現了利用按鈕從HomePage跳轉到TestPage這樣一個過程，現在我們爲TestPage添加上述的六個鉤子，通過控制檯觀察它們的調用情況。
頁面主題部分代碼如下
export class TestPage {
title:string;
constructor(public navCtrl:NavController,public params:NavParams,public alertCtrl:AlertController){
this.title=this.params.get('title');
console.log('觸發構造函數');
}
popPage(){
this.navCtrl.pop();
}
//溝崽子們
ionViewDidLoad(){
console.log('觸發ionViewDidLoad');
}
ionViewWillEnter(){
console.log('觸發ionViewWillEnter');
}
ionViewDidEnter(){
console.log('觸發ionViewDidEnter');
}
ionViewWillLeave(){
console.log('觸發ionViewWillLeave');
}
ionViewDidLeave(){
console.log('觸發ionViewDidLeave');
}
ionViewWillUnload(){
console.log('觸發ionViewWillUnload');
}
}
注意，我在構造函數裏，也加了一句測試語句。打開Serve調試，點擊按鈕，進入TestPage，觀察控制檯輸出了什麼。
返回到首頁，觀察控制檯輸出了什麼。
再一次進入和離開TestPage，觀察控制檯輸出了什麼。
可以得出以下結論：
- 構造函數在ionViewDidLoad之前被觸發
- ionViewDidLoad只在第一次進入頁面時觸發
- ionViewWillUnload會在每次離開頁面後觸發
2.還有兩個守衛鉤子
我開頭提到ionic提供了8個鉤子，而我只介紹了6個。前6個鉤子有個共性，他們的返回值都是void，即在相應時刻調用，不會返回任何的信息。
而另外兩個鉤子有些不太一樣，它們是可以返回布爾值的ionViewCanEnter和ionViewCanLeave。
瞧瞧，剛剛講了時態，現在開始講情態動詞了。如果前6個鉤子是頁面對用戶來訪的一種被動反應，那麼現在，頁面具有了意識，可以准許你來或者准許你走，啊，頁面從此站起來了！
這兩個鉤子，更多扮演着權限控制的角色，最近有個很新潮的術語叫守衛(Guard)，這個守衛怎麼理解呢，你可以把它理解成小區的看門大爺、和藹可親的班主任，以及古代杏花樓裏的姿態萬千的老鴇2333。
既然我們已經知道它能返回布爾值，那麼就來試一試吧。因爲我們的程序裏沒有業務邏輯，這裏就用一個時間的API來判斷吧，我寫這篇文章的時候是晚上11點，那麼就用getHours來幫助我們測試。
//和藹可親的班主任
ionViewCanEnter() :boolean {
if(new Date().getHours()>=8){
console.log('怎麼的呢，你看看現在幾點了，你那麼舒服咋不在家裏接着睡吶，給我門外站着去！');
return false;
}
return true;
}
//杏花樓姿態萬千的老鴇
ionViewCanLeave() :boolean {
if(new Date().getHours()>=22){
console.log('哎呀公子，你看都這麼晚了，最近外面風聲那麼緊，不如就在我們這兒留宿吧，你看姑娘們都捨不得你回去呢');
return false;
}
return true;
}
同理，在頁面中想離開，如果 ionViewCanLeave 返回了false，就會被阻攔。
3 總結
咳咳，不廢話了，綜上所述，ionic具有如下的生命週期鉤子
- ionViewDidLoad 第一次調用 返回void
- ionViewWillEnter 每次調用 返回void
- ionViewDidEnter 每次調用 返回void
- ionViewWillLeave 每次調用 返回void
- ionViewDidLeave 每次調用 返回void
- ionViewWillUnload 每次調用 返回void
- ionViewCanEnter 每次調用 返回boolean
- ionViewCanLeave 每次調用 返回boolean
作者：忠叔
鏈接：https://www.jianshu.com/p/72b704b5c9ed
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。