【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官网） 

欢迎指正！