ionic3-handbook
ionic3-handbook copied to clipboard
JerryMissTom
7、生命周期
这一节我们来讲讲界面的生命周期，在此之前需要让大家熟悉下堆栈式导航的相关内容。需要提及的两个概念是，当一个页面对我们是可见的，那它就是active，假如不可见，那就是inactive。堆栈式导航的意思很简单，一幅图可以说明。假设一个场景，从A界面跳转到B界面，然后B界面返回至A界面（注意是返回，不是跳转）界面的堆栈图如下：
从A界面跳转到B界面，A界面并没有被销毁，而是被压入堆栈，变得inactive，B界面进入堆栈在最上面，变成active。假如返回至A界面，此时B界面被销毁，而不是inactive，A界面在堆栈最上面，重新变成active。
B界面从被创建，进入堆栈，变成active，然后返回至上一界面，被销毁，这个过程中ionic提供了函数对其进行了监控，也就是生命周期函数。还是先写代码，通过现象来解释：
home.ts
...
constructor(public navCtrl : NavController) {
console.log("HomePage constructor");
}
...
ionViewDidLoad() {
console.log('HomePage ionViewDidLoad');
}
ionViewWillEnter() {
console.log('HomePage ionViewWillEnter');
}
ionViewDidEnter() {
console.log('HomePage ionViewDidEnter');
}
ionViewWillLeave() {
console.log('HomePage ionViewWillLeave');
}
ionViewDidLeave() {
console.log('HomePage ionViewDidLeave');
}
ionViewWillUnload() {
console.log('HomePage ionViewWillUnload');
}
ionViewCanEnter() {
console.log('HomePage ionViewCanEnter');
}
ionViewCanLeave() {
console.log('HomePage ionViewCanLeave');
}
normal-load.ts
..
constructor(public navCtrl : NavController, public navParams : NavParams) {
// 变量初始化，获取从上一界面传过来的参数
console.error("HomePage constructor");
this.name = this.navParams.get('name');
this.age = this.navParams.get('age');
}
ionViewDidLoad() {
// 界面加载完成运行，并且只运行一次，在这里可以进行网络请求，订阅事件等操作
console.error('NormalLoadPage ionViewDidLoad');
}
ionViewWillEnter() {
// 当界面将要成为active的时候运行，用的比较少
console.error('NormalLoadPage ionViewWillEnter');
}
ionViewDidEnter() {
// 界面每次变成active的时候都会运行，常见的使用场景是每次进入此界面都重新从网络获取数据
console.error('NormalLoadPage ionViewDidEnter');
}
ionViewWillLeave() {
// 界面将要离开的时候
console.error('NormalLoadPage ionViewWillLeave');
}
ionViewDidLeave() {
// 界面已经离开的时候，不在是active
console.error('NormalLoadPage ionViewWillLeave');
}
ionViewWillUnload() {
// 当界面被销毁的时候，这儿可以执行取消订阅等操作
console.error('NormalLoadPage ionViewWillUnload');
}
ionViewCanEnter() {
// 通过返回true或者false来决定是否可以进入此界面，返回true是可以
console.error('NormalLoadPage ionViewCanEnter');
}
ionViewCanLeave() {
// 通过返回true或者false来决定是否可以离开此界面，返回true是可以，这儿可以进行判断数据是否提交等操作
console.error('NormalLoadPage ionViewCanLeave');
}
界面所有相关的生命周期函数都在上面，每个函数中的意思以及相关常见的操作都在注释中，在此不再赘述。
我们在HomePage和NormalLoadPage两个界面中写上生命周期函数，然后执行从HomePage跳转到NormalLoadPage，然后返回这个操作。ionic serve运行项目，执行上述操作，然后看下日志，如下图：
上图可以看出，并不是HomePage界面的生命周期函数执行完，才执行NormalLoadPage界面的生命周期函数。他们各自的生命周期函数是穿插在一起的。HomePage界面的ionViewWillUnload函数始终没执行，这是因为在堆栈下，只是inactive，并没有被销毁。当NormalLoadPage返回时被销毁，所以它的ionViewWillUnload才执行了。另外HomePage的ionViewDidLoad只在界面创建的时候执行了一次，从NormalLoadPage返回后界面active的时候并未再次执行，ionViewDidEnter又重新执行了一次。
其他的调用顺序全部在图上，就不解释了。
@cjk87927
ionViewWillUnload() {
// 当界面被销毁的时候，这儿可以执行取消订阅等操作
console.error('NormalLoadPage ionViewWillUnload');
}
这个不知道是不是你想要的。
@JerryMissTom 谢谢 目前是用事件的形式来通知上一层页面加载被修改的数据的 顺便问下有没有好用的表单验证插件,类似jquery validate,带提示样式的