ionViewDidLoad

页面加载完成触发,这里的“加载完成”指的是页面所需的资源已经加载完成,但还没进入这个页面的状态(用户看到的还是上一个页面)。

需要注意的是它是一个很傲娇的钩子,全程只会调用一次,即第一次进入页面时被调用,此后你无论怎样进进出出它都冷冷清清凄凄惨惨戚戚不再理你了。除非你把它的后台杀了,重新进入这个软件(在网页调试的时候按刷新也是可以的)。

因此这个钩子适合你做一些一次性的处理,比如从服务器拉取用户数据存到缓存中。

ionViewWillEnter

字面意义理解就是“我要进来了”的那一刻,这个时候页面刚刚开始切换。你可以在这时对页面的数据进行预处理,这个钩子是每次都会调用的

ionViewDidEnter

当这个钩子被触发的时候,用户已经进入到新页面了(页面处于激活状态),同样也是每次都会调用。

说到这我不得不插一句,ionic对钩子的命名对广大中国学生真是友好啊,一个will一个did就把事情解决了。不像外边某些妖艳(误)的框架,一堆ready, update, complied, destory什么的,记一次忘一次。(当然这是一个玩笑,组件的命名跟框架的运行机制是息息相关的)

ionViewWillLeave

页面准备 (is about to) 离开时触发,这时用户刚刚触发了返回按钮或者相关的事件。

ionViewDidLeave

页面已经 (has finished) 离开时触发,页面处于非激活状态了。

ionViewWillUnload

页面中的资源即将被销毁时触发,此刻你是否会猜测这个钩子与ionViewDidLoad一样,只会被触发一次呢?

注意:
构造函数在ionViewDidLoad之前被触发
ionViewDidLoad只在第一次进入页面时触发
ionViewWillUnload会在每次离开页面后触发

守卫钩子

ionViewCanEnter

ionViewCanLeave大专栏  ionic3 生命周期钩子/h2>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    ionViewCanEnter() :boolean {
if(new Date().getHours()>=8){
console.log('怎么的呢,你看看现在几点了,你那么舒服咋不在家里接着睡吶,给我门外站着去!');
return false;
}
return true;
} //杏花楼姿态万千的老鸨
ionViewCanLeave() :boolean {
if(new Date().getHours()>=22){
console.log('哎呀公子,你看都这么晚了,最近外面风声那么紧,不如就在我们这儿留宿吧,你看姑娘们都舍不得你回去呢');
return false;
}
return true;
}

总结

ionViewDidLoad 第一次调用 返回void
ionViewWillEnter 每次调用 返回void
ionViewDidEnter 每次调用 返回void
ionViewWillLeave 每次调用 返回void
ionViewDidLeave 每次调用 返回void
ionViewWillUnload 每次调用 返回void
ionViewCanEnter 每次调用 返回boolean
ionViewCanLeave 每次调用 返回boolean

ionic3 生命周期钩子的更多相关文章

  1. Vue.js 系列教程 3:Vue-cli,生命周期钩子

    原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...

  2. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  3. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  4. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  5. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  6. ionic3 生命周期 之 ionViewWillLeave 坑

    ionic3  生命周期 ionViewWillLeave,当页面关闭离开时 执行的事件, 从页面根部跳转 this.appCtrl.getRootNav().setRoot() 方法离开时是 不执行 ...

  7. vue-实例生命周期钩子(不太明白)

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要 ...

  8. vue 项目实战 (生命周期钩子)

    开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个)        1. beforeCreate             刚 new了一个组件,无法访问到数据和真实的do ...

  9. 浅析vue实例的生命周期(生命周期钩子)

    “每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...

随机推荐

  1. winter_holiday_2019

    个人逐利对他人的影响:私营企业主的个人付出.作为长辈对晚辈的付出 是2020要实现精准扶贫吗?精准扶贫的概念,是针对一个家庭还是针对家里的每个人的平均收入.精准扶贫比教育更有作用,刘传铁(湖北省委高校 ...

  2. JAVA初学者——标识符命名规则及数据类型的转换

    Hello!我是浩宇大熊猫~ 直接进入正题吧~ 1)标识符的命名规则. 标识符命名法有小驼峰命名法和大驼峰命名法两种,分别应用于方法.变量和类. 小驼峰命名法应用于方法和变量,主要有两个约定: 1.标 ...

  3. jsp/servlet编码原理

    转自:http://janwer.iteye.com/blog/150226 首先,说说 JSP/Servlet 中的几个编码的作用 在 JSP/Servlet 中主要有以下几种设置编码的方式: pa ...

  4. MySQL-慢日志slow log

    文件结构 1.目录结构 drwxrwxr-x mysql mysql Mar bin drwxrwxr-x mysql mysql Dec : binlogdir -rw-r--r-- mysql m ...

  5. NGINX常用模块(二)

    5.Nginx日志配置 Nginx有非常灵活的日志记录模式.每个级别的配置可以有各自独立的访问日志.日志格式 通过log_format命令定义格式 1.log_format指令 # 配置语法:包括:e ...

  6. C语言 指针在函数传参中的使用

    int add(int a, int b)   //函数传参的时候使用了int整型数据,本身是数值类型.实际调用该函数时,实参将自己拷贝一份,并将拷贝传递给形参进行运算.实参自己实际是不参与运算的.所 ...

  7. Java中的堆、栈、方法区

    堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存放对 ...

  8. [JS]實作LinkedList鏈結串列

    由於自身資料結構的基礎薄弱,買了一本JavaScript資料結構與演算法實作的書來看,重新把LinkedList鏈結串列學習了一遍,並用JS實作出來. LinkedList鏈結串列 要存放多個元素,最 ...

  9. idea整合mybatis逆向工程

    --pom.xml添加插件 <build> <finalName>hnapi</finalName> <plugins> <plugin> ...

  10. day39-进程-队列

    #队列Queue:进程之间数据是隔离的,不共享的,但是通过multiprocessing的Queue可以实现进程之间的通信. #1.先进先出:把1 2 3放到队列里,按1 2 3的顺序拿出来. fro ...