手摸手带你入门ionic3(七)：生命周期

这一节我们来讲讲界面的生命周期，在此之前需要让大家熟悉下堆栈式导航的相关内容。需要提及的两个概念是，当一个页面对我们是可见的，那它就是active，假如不可见，那就是inactive。堆栈式导航的意思很简单，一幅图可以说明。假设一个场景，从A界面跳转到B界面，然后B界面返回至A界面（注意是返回，不是跳转）界面的堆栈图如下：

从A界面跳转到B界面，A界面并没有被销毁，而是被压入堆栈，变得inactive，B界面进入堆栈在最上面，变成active。假如返回至A界面，此时B界面被销毁，而不是inactive，A界面在堆栈最上面，重新变成active。

B界面从被创建，进入堆栈，变成active，然后返回至上一界面，被销毁，这个过程中ionic提供了函数对其进行了监控，也就是生命周期函数。还是先写代码，通过现象来解释：

home.ts

...
constructor(public navCtrl : NavController) {
    console.log("HomePage constructor");
  }

...

  ionViewDidLoad() {
    console.log('HomePage ionViewDidLoad');
  }

  ionViewWillEnter() {
    console.log('HomePage ionViewWillEnter');
  }

  ionViewDidEnter() {
    console.log('HomePage ionViewDidEnter');
  }

  ionViewWillLeave() {
    console.log('HomePage ionViewWillLeave');
  }

  ionViewDidLeave() {
    console.log('HomePage ionViewDidLeave');
  }

  ionViewWillUnload() {
    console.log('HomePage ionViewWillUnload');
  }

  ionViewCanEnter() {
    console.log('HomePage ionViewCanEnter');
  }

  ionViewCanLeave() {
    console.log('HomePage ionViewCanLeave');
  }
复制代码

normal-load.ts

..
constructor(public navCtrl : NavController, public navParams : NavParams) {
    // 变量初始化，获取从上一界面传过来的参数
    console.error("HomePage constructor");
    this.name = this.navParams.get('name');
    this.age = this.navParams.get('age');
  }

  ionViewDidLoad() {
    // 界面加载完成运行，并且只运行一次，在这里可以进行网络请求，订阅事件等操作
    console.error('NormalLoadPage ionViewDidLoad');
  }

  ionViewWillEnter() {
    // 当界面将要成为active的时候运行，用的比较少
    console.error('NormalLoadPage ionViewWillEnter');
  }

  ionViewDidEnter() {
    // 界面每次变成active的时候都会运行，常见的使用场景是每次进入此界面都重新从网络获取数据
    console.error('NormalLoadPage ionViewDidEnter');
  }

  ionViewWillLeave() {
    // 界面将要离开的时候
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewDidLeave() {
    // 界面已经离开的时候，不在是active
    console.error('NormalLoadPage ionViewWillLeave');
  }

  ionViewWillUnload() {
    // 当界面被销毁的时候，这儿可以执行取消订阅等操作
    console.error('NormalLoadPage ionViewWillUnload');
  }

  ionViewCanEnter() {
    // 通过返回true或者false来决定是否可以进入此界面，返回true是可以
    console.error('NormalLoadPage ionViewCanEnter');
  }

  ionViewCanLeave() {
    // 通过返回true或者false来决定是否可以离开此界面，返回true是可以，这儿可以进行判断数据是否提交等操作
    console.error('NormalLoadPage ionViewCanLeave');
  }
复制代码

界面所有相关的生命周期函数都在上面，每个函数中的意思以及相关常见的操作都在注释中，在此不再赘述。

我们在HomePage和NormalLoadPage两个界面中写上生命周期函数，然后执行从HomePage跳转到NormalLoadPage，然后返回这个操作。ionic serve运行项目，执行上述操作，然后看下日志，如下图：

上图可以看出，并不是HomePage界面的生命周期函数执行完，才执行NormalLoadPage界面的生命周期函数。他们各自的生命周期函数是穿插在一起的。HomePage界面的ionViewWillUnload函数始终没执行，这是因为在堆栈下，只是inactive，并没有被销毁。当NormalLoadPage返回时被销毁，所以它的ionViewWillUnload才执行了。另外HomePage的ionViewDidLoad只在界面创建的时候执行了一次，从NormalLoadPage返回后界面active的时候并未再次执行，ionViewDidEnter又重新执行了一次。

其他的调用顺序全部在图上，就不解释了。