Ionic3页面的生命周期

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35624642/article/details/80680445

做现在的MVVM的单页面前端项目，一般只要把整个页面的生命周期函数理顺了就得心应手了，下面是ionic的生命周期事件：

截至ionic 3.8.0版本，框架提供了8个钩子函数，它们分别会在页面生命周期的各个阶段被触发，我们来简单了解一下。

1. // 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在  
2. onPageLoaded() {  
3.   console.log('page 1: page loaded.');  
4. }  
5.   
6. // 页面即将进入的时候  
7. onPageWillEnter() {  
8.   // 在这里可以做页面初始化的一些事情  
9.   console.log('page 1: page will enter.');  
10. }  
11.   
12. // 页面已经进入的时候  
13. onPageDidEnter() {  
14.   console.log('page 1: page did enter.');  
15. }  
16.   
17. // 页面即将离开的时候  
18. onPageWillLeave() {  
19.   console.log('page 1: page will leave.');  
20. }  
21.   
22. // 页面已经离开的时候  
23. onPageDidLeave() {  
24.   console.log('page 1: page did leave.');  
25. }  
26.   
27. // 从 DOM 中移除的时候执行的生命周期  
28. onPageWillUnload() {  
29.   
30. }  
31.   
32. // 从 DOM 中移除执行完成的时候  
33. onPageDidUnload() {  
34.   
35. }  

上面介绍了6个。这6个钩子有个共性，它们的返回值都是void，即在相应时刻调用，不会返回任何的信息。

而另外两个钩子有些不太一样，它们是可以返回布尔值的ionViewCanEnter和ionViewCanLeave。

//字面理解能进入
  ionViewCanEnter() :boolean {
    if(new Date().getHours()>=9){
      console.log('时间到了，上班了！');
      return false;
    }
    return true;
  }

//字面理解能离开
  ionViewCanLeave() :boolean {
    if(new Date().getHours()>=18){
      console.log('时间到了，可以下班了！');
      return false;
    }
    return true;
  }