【Uniapp】关于核心页面生命周期流程详解

UniApp 的页面生命周期继承自 Vue 组件生命周期，本文将解析核心页面生命周期流程，介绍对应的触发时机、作用并给出示例。

页面生命周期触发顺序

onLoad → onShow → onReady → onHide → onUnload

各个页面生命周期介绍

一、onLoad

• 触发时机：页面初始化加载时触发，仅执行一次，可以接收路由参数。
• 核心作用：接收路由参数、初始化数据、发起网络请求。
• 典型场景：商品详情页根据 ID 获取商品信息。

<script setup>
import { ref } from 'vue';
import { getCurrentInstance } from '@dcloudio/uni-app';const { proxy } = getCurrentInstance();
const productId = ref('');
const productInfo = ref({});// 接收路由参数
proxy.onLoad((option) => {productId.value = option.id;// 模拟网络请求setTimeout(() => {productInfo.value = {name: '示例商品',price: 99};}, 1000);
});
</script>

二、onShow

• 触发时机：页面显示或从后台恢复时触发，可多次执行，总之每次页面显示都会触发。
• 核心作用：刷新动态数据、启动周期性任务（如定时器）。
• 典型场景：聊天页更新未读消息数量。

<script setup>
import { ref, onShow } from 'vue';const unreadCount = ref(0);
let timer = null;onShow(() => {// 模拟数据刷新unreadCount.value = Math.floor(Math.random() * 10);// 启动定时器timer = setInterval(() => {console.log('心跳检测');}, 3000);
});
</script>

三、onReady

• 触发时机：页面首次渲染完成时触发，此时组件已挂载完成，DOM 树($el)已可用。
• 核心作用：操作 DOM 节点、初始化依赖渲染的组件（如地图、图表）。
• 典型场景：获取自定义组件尺寸。

<script setup>
import { ref, onReady } from 'vue';const elementHeight = ref(0);onReady(() => {uni.createSelectorQuery().select('.content').boundingClientRect((res) => {if (res) elementHeight.value = res.height;}).exec();
});
</script>

四、onHide

• 触发时机：页面隐藏或切入后台时触发。
• 核心作用：暂停非必要任务、保存临时状态。
• 典型场景：视频播放页暂停播放。

<script setup>
import { ref, onHide } from 'vue';const videoPlayer = ref(null);onHide(() => {if (videoPlayer.value) {videoPlayer.value.pause(); // 假设组件有暂停方法}
});
</script>

五、onUnload

• 触发时机：页面卸载时触发（如关闭页面、重定向）。
• 核心作用：清理资源、取消未完成请求，防止内存泄漏。
• 典型场景：取消未完成的网络请求。

<script setup>
import { ref, onUnload } from 'vue';let abortController = null;onUnload(() => {// 清除定时器clearInterval(timer);// 取消网络请求if (abortController) {abortController.abort();}
});
</script>

vue3页面和组件生命周期执行顺序 （图源自uniapp官网）

vue2页面和组件生命周期执行顺序 （图源自uniapp官网） 

 

 

---

欢迎指正！