Uniapp 常用声明周期(十一)

常用声明周期

• uni-app 框架的声明周期结合了 Vue 和微信小程序的声明周期

• 全局的 App 中使用 onLaunch 表示启动时(只有 App.vue 中使用)

• 页面中使用 onLoad 或者 onShow 分别表示页面加载完毕和页面显示的时候(只有页面使用)

• 组件中使用 mounted 组件挂载完毕

优先级

• onLaunch 项目启动就执行 (项目)

• onLoad 页面加载 (页面)

• onShow 切换后台

• onHide 隐藏的时候

• mounted 组件挂载 (组件)

项目声明周期

• onLaunch 全局只触发一次

• onShow 当项目启动,或从后台进入前台显示

• onHide 当项目从前台进入后台

• onError 当报错的时候触发

以上那些声明周期函数 只能在 App.vue 中使用

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

页面声明周期

• onLoad 页面加载

• onShow 页面显示

• onReady 渲染完成如果渲染速度快,会在页面进入动画前完成

• onHide 监听页面隐藏

• onUnload 监听页面卸载

• onResize 监听窗口尺寸变化

• onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新

• onReachBottom 页面滚动到底部的事件,常用于下拉下一页数据

• onTabItemTap 点击 tab 触发

• onShareAppMessage 用户点击右上角分享

• onPageScroll 监听页面滚动.

• onShareTimeline 监听用户点击右上角转发到朋友圈

• onAddToFavorites 监听用户点击右上角收藏

组件的声明周期

• beforeCreate 创建前

• created 创建的时候

• beforeMount 挂载前被调用

• mounted 挂载实例

• beforeUpdate 数据更新

• updated 更新完成

• beforeDestroy 组件销毁

• destroyed 组件销毁