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. LIINQ TO JS

    记录一下,方便自己查找... 自己在开发前端时,对于处理JSON,觉得真是枯燥.处理数据,基本都要循环. 所以我想着前端也能跟后端一样,有Linq来处理我的JSON对象就好了.上网一搜,找到了JSLI ...

  2. PAT Advanced 1023 Have Fun with Numbers (20) [⼤整数运算]

    题目 Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, ...

  3. 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证

    登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...

  4. 面向对象 / MVC

    MVC模式 :  是一种分层思想(软件设计典范) M-model 模型层 :主要负责业务代码和数据 V-view 视图层 : 主要负责展现展示 C-controller 控制层:负责分发请求返回数据 ...

  5. 非线性支持向量机SVM

    非线性支持向量机SVM 对于线性不可分的数据集, 我们引入了核(参考:核方法·核技巧·核函数) 线性支持向量机的算法如下: 将线性支持向量机转换成非线性支持向量机只需要将变为核函数即可: 非线性支持向 ...

  6. redis简单了解与简单使用

    redis数据库 为什么要学习redis """ 1.redis是内存 no-sql 数据库,相比mysql等硬盘数据库效率高 2.在内存值配置数据库使用,而不直接使用内 ...

  7. maven打包springboot项目的插件配置概览

    jar包的术语背景: normal jar: 普通的jar,用于项目依赖引入,不能通过java -jar xx.jar执行,一般不包含其它依赖的jar包. fat jar: 也叫做uber jar,是 ...

  8. redhat6.5 升级内核

    1.导入key rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 2.安装elrepo的yum源 rpm -Uvh https:// ...

  9. Python语言学习前提:Pycharm的使用

    一.Pycharm的使用 1.点击Pycharm的图标 2.点击首页Create New Project > 在弹出的页面点击Pure Python 3.选择项目文件存放的位置,选择完成之后点击 ...

  10. 使用node 做静态文件服务器

    # 1. 使用server-static 包 使用node可以非常快速的方法把指定目录共享出去 前提条件:安装了node,附带有npm 要托管的文件目录为 /root/www # 先创建一个目录用来存 ...