ionic3 生命周期钩子
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;
}
总结
1 |
ionViewCanEnter() :boolean {
|
ionViewDidLoad 第一次调用 返回void
ionViewWillEnter 每次调用 返回void
ionViewDidEnter 每次调用 返回void
ionViewWillLeave 每次调用 返回void
ionViewDidLeave 每次调用 返回void
ionViewWillUnload 每次调用 返回void
ionViewCanEnter 每次调用 返回boolean
ionViewCanLeave 每次调用 返回boolean
ionic3 生命周期钩子的更多相关文章
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- ionic3 生命周期 之 ionViewWillLeave 坑
ionic3 生命周期 ionViewWillLeave,当页面关闭离开时 执行的事件, 从页面根部跳转 this.appCtrl.getRootNav().setRoot() 方法离开时是 不执行 ...
- vue-实例生命周期钩子(不太明白)
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要 ...
- vue 项目实战 (生命周期钩子)
开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate 刚 new了一个组件,无法访问到数据和真实的do ...
- 浅析vue实例的生命周期(生命周期钩子)
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
随机推荐
- leetcode 690.员工的重要性
题目: 给定一个保存员工信息的数据结构,它包含了员工唯一的id,重要度 和 直系下属的id. 比如,员工1是员工2的领导,员工2是员工3的领导.他们相应的重要度为15, 10, 5.那么员工1的数据结 ...
- vue-router HTML5 History 模式(转自官网)
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- UVA 10801 多线程最短路
题意:一栋摩天大楼从0层到K层,有N部电梯,每个电梯都有自己的运行速度,此外,对于某个电梯来说,并不是每一层都会停,允许在某一层进行电梯换乘,每次换乘固定消耗60秒,最终求从0层去K层的最短时间,如果 ...
- day59-mysql-存储过程、函数、事务、锁、备份
存储过程.函数不是重要的内容. 三. 存储过程:类似于函数(方法),简单的说存储过程是为了完成某个数据库中的特定功能而编写的语句集合, 该语句集包括SQL语句(对数据的增删改查).条件语句和循环语句等 ...
- oracle 学习(三)pl/sql语言函数
系统内置函数 数学运算函数 字符串函数 统计函数 日期函数 用户定义函数:存储在数据库中的代码块,可以把值返回到调用程序.调用时如同系统函数一样 参数模式 IN模式:表示该参数时输入给函数的参数 OU ...
- Iptables用法规则及防火墙配置
[转载]http://www.cnblogs.com/yi-meng/p/3213925.html iptables规则 即防火墙规则,在内核看来,规则就是决定如何处理一个包的语句.如果一个包符合条 ...
- linux 笔记本
命令 作用 tail -f 日志文件名 将日志同步输出 echo "">文件名 清空文件内容
- mongo客户端升级导致pymongo中使用聚合函数时出现异常
一.异常信息 The 'cursor' option is required, except for aggregate with the explain argument 二.解决办法 #部分源代码 ...
- Proe5.0导出PDF至配置文件的相关方法,VC++
定义文件bcsMessage.txt PLM PLM PLM # login login 测试 # Active messagebox menu Active messagebox menu 激活菜单 ...
- LeetCode No.145,146,147
No.145 PostorderTraversal 二叉树的后序遍历 题目 给定一个二叉树,返回它的 后序 遍历. 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 示例 输入: [1,null,2 ...