Ionic页面的生命周期

最新推荐文章于 2021-01-14 21:51:32 发布

chelen_jak

最新推荐文章于 2021-01-14 21:51:32 发布

阅读量166

点赞数

分类专栏：实用 Ionic3

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

本文详细介绍了Ionic框架中的六个常用页面生命周期事件：ionViewDidLoad、ionViewWillEnter、ionViewDidEnter、ionViewWillLeave、ionViewDidLeave 和 ionViewWillUnload，并通过示例代码展示了这些事件的触发时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://blog.youkuaiyun.com/wei11556/article/details/56484718

官方文档

如官网文档所示，常用的生命周期有如下6个：

Event	Desc
ionViewDidLoad	当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发
ionViewWillEnter	顾名思义，当将要进入页面时触发
ionViewDidEnter	当进入页面时触发
ionViewWillLeave	当将要从页面离开时触发
ionViewDidLeave	离开页面时触发
ionViewWillUnload	当页面将要销毁同时页面上元素移除时触发

在demo中加入以下代码：

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");
}

运行结果