ionic3/ionic4 生命周期函数介绍

幽梦林子

ionic3/ionic4  生命周期函数有哪些呢？首先，让我们先参考以下网址：http://www.ionic.wang/article-index-id-169.html


Ionic4 Angular7视频教程+源码：  https://pan.baidu.com/s/1eTyvq5W

一、Ionic3生命周期函数：

1. constructor(public navCtrl: NavController, public navParams: NavParams) {   
   
2.       console.log('constructor UserPage');
   
3.     }
   
4.     ionViewDidLoad(){
   
5.         console.log("1.0 ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");
   
6.     }
   
7.     ionViewWillEnter(){
   
8.         console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");
   
9.     }
   
10.     ionViewDidEnter(){
    
11.         console.log("3.0 ionViewDidEnter 当进入页面时触发");
    
12.     }
    
13.     ionViewWillLeave(){
    
14.         console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");
    
15.     }
    
16.     ionViewDidLeave(){
    
17.         console.log("5.0 ionViewDidLeave 离开页面时触发");
    
18.     }
    
19.     ionViewWillUnload(){
    
20.         console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
    
21.     }
    
22. 
    
23.     ionViewCanEnter(){
    
24.         console.log("ionViewCanEnter");
    
25.     }
    
26.     ionViewCanLeave(){
    
27.         console.log("ionViewCanLeave");
    
28.     }

复制代码

二、Ionic4生命周期函数：

Ionic4中的生命周期函数和angualr7基本是一样的，下面我们看看Ionic4中的生命周期函数，以及生命周期函数的用法。  

Ionic4中内置的生命周期函数：

ionViewWillEnter —当进入一个页面时触发(如果它从堆栈返回)

ionViewDidEnter —进入后触发

ionViewWillLeave —如果页面将离开触发

ionViewDidLeave — 在页面离开后触发

ionViewWillUnload — 在Angular中没有触发，因为这里你必须使用ngOnDestroy

Ionic4中使用Angular生命周期函数：

1、Ionic4中的生命周期函数ngOnChanges 当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发

2、Ionic4中的生命周期函数ngOnInit 请求数据一般放在这个里面  （重要*）

3、Ionic4中的生命周期函数ngDoCheck 检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应

4、Ionic4中的生命周期函数 ngAfterContentInit 当把内容投影进组件之后调用

5、Ionic4中的生命周期函数 ngAfterContentChecked 每次完成被投影组件内容的变更检测之后调用

6、Ionic4中的生命周期函数 ngAfterViewInit初始化完组件视图及其子视图之后调用（dom操作放在这个里面） （重要）

7、Ionic4中的生命周期函数 ngAfterViewInit  每次做完组件视图和子视图的变更检测之后调用

8、Ionic4中的生命周期函数  ngOnDestroy  组件销毁后执行 （重要）