uni-app的生命周期

在 uni-app 中生命周期分为应用生命周期、页面生命周期和组件生命周期三大类。一、应用生命周期应用生命周期在App.vue中定义用于监听应用从启动到关闭的整个过程。常用生命周期函数函数名说明onLaunch应用初始化完成时触发全局只触发一次常用于获取用户信息、全局数据初始化等onShow应用启动或从后台进入前台时触发onHide应用从前台进入后台时触发onError应用发生脚本错误或 API 调用报错时触发onUniNViewMessage当使用nvue页面时用于接收nvue发送的消息示例!-- App.vue -- script export default { onLaunch: function() { console.log(App Launch); // 初始化全局数据、登录等 }, onShow: function() { console.log(App Show); }, onHide: function() { console.log(App Hide); }, onError: function(err) { console.log(App Error, err); } } /script二、页面生命周期页面生命周期在页面pages目录下的.vue文件中定义用于监听页面进入、渲染、退出等过程。常用生命周期函数函数名说明onLoad页面加载时触发参数为上一个页面传递的数据常用于获取参数、请求数据onShow页面显示时触发每次进入页面都会触发onReady页面初次渲染完成时触发可用于操作 DOMonHide页面隐藏时触发如跳转到其他页面onUnload页面卸载时触发如关闭页面onPullDownRefresh用户下拉刷新时触发需开启enablePullDownRefreshonReachBottom页面滚动到底部时触发常用于上拉加载更多onShareAppMessage用户点击右上角分享时触发定义分享内容onPageScroll页面滚动时触发示例!-- pages/index/index.vue -- template view text{{ message }}/text /view /template script export default { data() { return { message: Hello }; }, onLoad(options) { console.log(页面加载参数, options); // 请求数据 this.loadData(); }, onShow() { console.log(页面显示); }, onReady() { console.log(页面初次渲染完成); }, onHide() { console.log(页面隐藏); }, onUnload() { console.log(页面卸载); }, onPullDownRefresh() { console.log(用户下拉刷新); // 刷新数据后调用 uni.stopPullDownRefresh() 停止刷新 setTimeout(() { uni.stopPullDownRefresh(); }, 1000); }, onReachBottom() { console.log(滚动到底部加载更多); }, onShareAppMessage() { return { title: 分享标题, path: /pages/index/index, imageUrl: /static/share.png }; }, methods: { loadData() { // 模拟请求 setTimeout(() { this.message 数据已更新; }, 500); } } } /script三、组件生命周期组件生命周期与Vue 原生生命周期完全一致在components目录下的组件文件中使用。常用生命周期钩子函数名说明beforeCreate实例初始化之后数据观测之前调用created实例创建完成数据观测已设置但尚未挂载常用于数据初始化beforeMount挂载开始之前调用mounted组件挂载到页面后调用可操作 DOMbeforeUpdate数据更新时DOM 重新渲染前调用updated数据更新DOM 重新渲染后调用beforeDestroy实例销毁前调用destroyed实例销毁后调用示例!-- components/MyComponent.vue -- template view text{{ text }}/text /view /template script export default { data() { return { text: 组件文本 }; }, beforeCreate() { console.log(beforeCreate); }, created() { console.log(created); }, beforeMount() { console.log(beforeMount); }, mounted() { console.log(mounted); }, beforeUpdate() { console.log(beforeUpdate); }, updated() { console.log(updated); }, beforeDestroy() { console.log(beforeDestroy); }, destroyed() { console.log(destroyed); } } /script四、生命周期执行顺序应用启动时App.onLaunchApp.onShow进入首页假设首页是pages/index/index页面onLoad页面onShow页面onReady页面跳转当前页面onHide新页面onLoad→onShow→onReady页面返回当前页面onUnload上一个页面onShow组件生命周期在页面渲染过程中按顺序触发。五、注意事项应用生命周期仅在App.vue中生效页面和组件中无法直接使用。页面生命周期仅在pages目录下的页面文件中生效普通组件中使用无效。组件生命周期遵循 Vue 规范在组件内部可直接使用。在onLoad中可以通过options参数获取上个页面传递的 query 参数如?id1。使用下拉刷新时必须在页面的json配置中开启enablePullDownRefresh: true或通过uni.startPullDownRefresh手动触发。页面的onReady通常用于操作 DOM但需要注意跨端兼容性如微信小程序中onReady后才可以获取 DOM 节点。