来扯点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