來扯點ionic3[3] 頁面的生命週期事件，也就是凡間所說的鉤子

首先要作一個誠摯的道歉，做爲大四狗，由於升學的事情，斷更兩個月，因此要感謝各位仁慈的讀者沒有脫粉（好像也就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