文章目录
- 0 引入
- 1、应用生命周期
- 2、页面生命周期
- 3、组件生命周期
- 4、引用
0 引入
uin-app生命周期是以小程序的生命周期为基础实现的,分为应用生命周期、页面生命周期、和组件生命周期,其中组件生命周期就是Vue的生命周期。
官方文档可见:https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
1、应用生命周期
补充说明:
1、App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。App.vue本身不是页面,这里不能编写视图元素,也就是没有。这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData。应用生命周期仅可在App.vue中监听,在页面监听无效
2、尽量不要在onLaunch钩子函数中进行页面跳转,如果进行页面跳转,可能会出现白屏报错的问题,其原因可能会与pages.json内配置的第一个页面跳转时出现的冲突,可以使用延迟进行跳转处理。
3、onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo);
4、小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
<script>
export default {
globalData: {
text: 'text'
}
}
</script>
2、页面生命周期
3、组件生命周期
组件的生命周期写在components文件夹下,和标准的Vue标准组件周期相同其函数如下:
函数 | 作用 |
---|---|
beforeCreate | 实例已经开始初始化之后调用 【数据初始化未完成,页面没有开始渲染】 |
created | 实例创建完成之后调用 【组件创建完成,不代表组件已挂载到页面】 |
beforeMount | 在挂载开始之前被调用。 |
mounted | 挂载到实例上去之后调用。 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。 仅H5平台支持 |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。 仅H5平台支持 |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。 |
destroyed | Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 |
4、引用
见文章内