Ionic页面的生命周期

来点好玩的吧，Ionic3页面的生命周期是一个很重要的东西。我脑子笨，每次都要查一查。为了方便自己查询，写下以下文字。

下面就是摘自ionic3官方文档里面关于页面生命周期的部分：

Page Event	Returns	Description
ionViewDidLoad	void	Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.
ionViewWillEnter	void	Runs when the page is about to enter and become the active page.
ionViewDidEnter	void	Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
ionViewWillLeave	void	Runs when the page is about to leave and no longer be the active page.
ionViewDidLeave	void	Runs when the page has finished leaving and is no longer the active page.
ionViewWillUnload	void	Runs when the page is about to be destroyed and have its elements removed.
ionViewCanEnter	boolean/Promise<void>	Runs before the view can enter. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can enter
ionViewCanLeave	boolean/Promise<void>	Runs before the view can leave. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can leave

总共有八个，其中常用的有六个，翻译并列成表格出来：

Event	Desc
ionViewDidLoad	当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发
ionViewWillEnter	顾名思义，当将要进入页面时触发
ionViewDidEnter	当进入页面时触发
ionViewWillLeave	当将要从页面离开时触发
ionViewDidLeave	离开页面时触发
ionViewWillUnload	当页面将要销毁同时页面上元素移除时触发

可以测试下结果：

ionViewDidLoad(){  
        console.log("1.0 ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");  
    }  
    ionViewWillEnter(){  
        console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");  
    }  
    ionViewDidEnter(){  
        console.log("3.0 ionViewDidEnter 当进入页面时触发");  
    }  
    ionViewWillLeave(){  
        console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");  
    }  
    ionViewDidLeave(){  
        console.log("5.0 ionViewDidLeave 离开页面时触发");  
    }  
    ionViewWillUnload(){  
        console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");  
    }  
  
    ionViewCanEnter(){  
        console.log("ionViewCanEnter");  
    }  
  
    ionViewCanLeave(){  
        console.log("ionViewCanLeave");  
    }  

对比下结果就很清楚他们之间的区别了

demo的结果