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的结果

Ionic页面的生命周期

推荐阅读更多精彩内容