官方介绍:页面简介 | uni-app官网
1.页面生命周期函数
生命周期钩子 | 描述 | H5 | App端 | 小程序 | 说明 |
---|---|---|---|---|---|
beforeCreate | 在实例初始化之后被调用 详情 |
√ | √ | √ | |
created | 在实例创建完成后被立即调用 详情 |
√ | √ | √ | |
beforeMount | 在挂载开始之前被调用 详情 |
√ | √ | √ | |
mounted | 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick 详情 |
√ | √ | √ | |
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前 详情 |
√ | √ | √ | |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子 详情 |
√ | √ | √ | |
activated | 被 keep-alive 缓存的组件激活时调用 详情 |
√ | √ | x | |
deactivated | 被 keep-alive 缓存的组件停用时调用 详情 |
√ | √ | x | |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用 详情 |
√ | √ | √ | |
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁 详情 |
√ | √ | √ | |
errorCaptured | 当捕获一个来自子孙组件的错误时被调用 详情 |
√ | √ | √ | - |
注意:
- 页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】
- 推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
- 推荐使用uni-app里面的onLoad 代替 vue 里面的 created
2.应用生命周期函数
onLaunch:当uni-app初始化完成时触发(全局只触发一次)
onShow:当uni-app启动,或从后台进入前台显示
onHide:当uni-app从前台进入后台
onError:当uni-app报错时触发
onUniNViewMessage:对nvue页面发送的数据进行监听
onUnhandledRejection:对未处理的Promise拒绝事件监听函数
onPageNotFound:页面不存在监听函数
onThemeChange:监听系统主题变化
注意:应用生命周期 仅可在App.vue中全局监听 ,在其它页面监听无效。
3.组件生命周期函数
uni-app
组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
beforeCreate | 在实例初始化之前被调用。详见 | ||
created | 在实例创建完成后被立即调用。详见 | ||
beforeMount | 在挂载开始之前被调用。详见 | ||
mounted | 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档 | ||
beforeUpdate | 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 | 仅H5平台支持 | |
updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 | 仅H5平台支持 | |
beforeDestroy | 实例销毁之前调用。在这一步,实例仍然完全可用。详见 | ||
destroyed | Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见 |