ionic 3 生命周期

1.代码以及效果

  

1. ionViewDidLoad(){

2. console.log("1.0 ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");

3. }

4. ionViewWillEnter(){

5. console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");

6. }

7. ionViewDidEnter(){

8. console.log("3.0 ionViewDidEnter 当进入页面时触发");

9. }

10. ionViewWillLeave(){

11. console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");

12. }

13. ionViewDidLeave(){

14. console.log("5.0 ionViewDidLeave 离开页面时触发");

15. }

16. ionViewWillUnload(){

17. console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");

18. }

19.  

20. ionViewCanEnter(){

21. console.log("ionViewCanEnter");

22. }

23.  

24. ionViewCanLeave(){

25. console.log("ionViewCanLeave");

26. }

 

详细说明：

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一样，只会被触发一次呢？