Ionic页面的生命周期
2018-06-05 本文已影响0人
thisDong
来点好玩的吧，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的结果
