Uniapp Vue3 生命周期钩子详解与最佳实践

在 Uniapp 开发中，Vue3 的生命周期钩子可分为组件级和页面级两类。组件生命周期与标准 Vue3 一致，而页面生命周期则包含 Uniapp 特有的应用级或页面级钩子。本文将系统梳理这两类生命周期的触发时机、典型用途及代码示例，帮助开发者更好地理解和使用。

组件生命周期详解

Vue3 组件生命周期适用于 Uniapp 的 .vue 组件，核心钩子包括以下几个阶段。

挂载阶段

• onBeforeMount：在模板编译完成但尚未挂载到 DOM 时触发，适合执行一些无需操作 DOM 的初始化任务。

import { onBeforeMount } from 'vue';
onBeforeMount(() => {
  console.log('组件即将挂载');
});

• onMounted：在 DOM 挂载完成后触发，此时可以安全地操作 DOM 或加载依赖 DOM 的第三方库。

import { onMounted, ref } from 'vue';
const chartRef = ref(null);
onMounted(() => {
  console.log('DOM 已挂载', chartRef.value);
});

更新阶段

• onBeforeUpdate 和 onUpdated：分别在数据变化前后触发，常用于记录状态或同步第三方库。

import { onBeforeUpdate, onUpdated, ref } from 'vue';
const scrollTop = ref(0);
onBeforeUpdate(() => {
  scrollTop.value = window.scrollY;
});
onUpdated(() => {
  window.scrollTo(0, scrollTop.value);
});

卸载阶段

• onBeforeUnmount 和 onUnmounted：在组件卸载前后触发，用于清理定时器、事件监听器等资源，防止内存泄漏。

import { onBeforeUnmount, onUnmounted } from 'vue';
let timer = null;
onBeforeUnmount(() => {
  clearInterval(timer);
});
onUnmounted(() => {
  console.log('组件已卸载');
});

页面生命周期解析

Uniapp 页面生命周期在 .vue 文件的 <script setup> 中使用，提供了应用级的钩子函数。

基础页面钩子

以下是 Uniapp 中常用的页面生命周期钩子及其典型用途：

import { onLoad, onShow } from '@dcloudio/uni-app';
onLoad((options) => {
  console.log('页面参数:', options.id);
});
onShow(() => {
  console.log('页面显示');
});

特殊场景钩子

• onReachBottom：当页面滚动到底部时触发，常用于实现分页加载更多数据的功能。

import { onReachBottom } from '@dcloudio/uni-app';
onReachBottom(() => {
  console.log('滚动到底部');
});

• onPageScroll：用于监听页面滚动事件，但需谨慎使用以避免性能问题。

生命周期执行顺序

以页面加载为例，典型的生命周期触发顺序为：onLoad → onShow → onReady。

当从当前页面跳转到其他页面后再返回时，会触发：onHide → onShow。

最佳实践

1. 资源清理：务必在 onUnload 或组件卸载钩子中释放定时器、事件监听等资源，防止内存泄漏。
2. 性能优化：避免在 onLoad 或 onShow 中执行耗时操作，以免阻塞页面渲染。
3. 平台差异：部分钩子（如 onBackPress）在不同平台（如 iOS 和 Android）上行为可能不同，需进行充分测试。

以下是一个完整的代码示例，展示了组件和页面生命周期的结合使用：

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';

onLoad((options) => {
  console.log('页面加载，参数:', options.id);
});

onShow(() => {
  console.log('页面显示');
});

onMounted(() => {
  console.log('组件挂载完成');
});

onUnmounted(() => {
  console.log('组件卸载');
});
</script>