往期傳送門
來扯點ionic3[0] 吹完牛再入門也不遲
來扯點ionic3[1] 創建一個新頁面
來扯點ionic3[2] 頁面一線牽 珍惜這段緣

首先要做一個誠摯的道歉，作為大四狗，因為升學的事情，斷更兩個月，所以要感謝各位仁慈的讀者沒有脫粉（好像也就50個粉絲）。這一節，我們延續上一節制作的頁面，來討論聲明周期鉤子的事情。

以我的經驗來看，多數同學是知道這個概念的。如果不太了解，那你肯定知道瀏覽器在加載完一個網頁時，會觸發一個onload事件，平時我們用window.onload或者jquery中的$(document).load()方法去定義一個網頁加載完成時應該做一些什么。

在一個APP中，這類的事件要更為豐富一些。很多時候，你要在用戶看到頁面之前，就要為他們把一些事情做好，最常見的就是從服務器上拉取數據；亦或是在他們要離開一個頁面時，進行一些處理。

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，觀察控制臺輸出了什么。

第二次進入和離開

可以得出以下結論：

1. 構造函數在ionViewDidLoad之前被觸發
2. ionViewDidLoad只在第一次進入頁面時觸發
3. 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

下一章: 來扯點ionic3[4] 結構型指令和列表渲染