uni-app Vue3生命周期管理与优化指南

在uni-app开发中，Vue3模式下的生命周期管理是构建高性能应用的核心基础。本文系统梳理了应用、页面、组件三级生命周期的运作机制，并结合实际开发场景提供优化方案。

生命周期体系解析

应用生命周期（App.vue）

应用生命周期控制全局状态，包含4个核心钩子：

export default {
  onLaunch() { // 应用初始化
    console.log('App Launch');
  },
  onShow() { // 进入前台
    console.log('App Show');
  },
  onHide() { // 进入后台
    console.log('App Hide');
  },
  onError(err) { // 错误捕获
    console.error('App Error', err);
  }
}

页面生命周期（核心场景）

页面生命周期通过组合式API实现，包含5个关键阶段：

import { onLoad, onShow } from 'vue';

export default {
  setup() {
    onLoad((options) => { // 参数接收
      console.log('Page Load', options);
    });

    onShow(() => { // 状态刷新
      console.log('Page Show');
    });
  }
}

以下是各钩子的触发条件和应用场景：

组件生命周期

组件生命周期与Vue3标准完全一致：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => { // 组件挂载
      console.log('Component Mounted');
    });
  }
}

性能优化方案

资源管理策略

• 初始化优化：将网络请求放在 onLoad，避免阻塞渲染
• 内存控制：在 onUnload 中执行清理操作，例如：

let timer = null;
onLoad(() => {
  timer = setInterval(() => {}, 1000);
});
onUnload(() => {
  clearInterval(timer); // 必须清理
});

平台差异处理

• 小程序配置：在页面JSON中设置下拉刷新和上拉加载距离

{
  "pullDownRefresh": {
    "threshold": 50
  },
  "onReachBottomDistance": 50
}

• App端优化：调整 onReachBottom 触发距离需修改配置文件

Vue3特性应用

• 语法糖简化：使用 <script setup> 语法重构页面生命周期

<script setup>
import { onLoad } from 'vue';
onLoad((options) => {
  console.log('Params:', options);
});
</script>

完整实践示例

以下是一个使用Vue3组合式API的完整页面示例：

<script setup>
import { ref, onLoad, onShow } from 'vue';
const userData = ref(null);

onLoad(async (options) => {
  const res = await fetch(`/api/user/${options.id}`);
  userData.value = await res.json();
});

onShow(() => {
  console.log('User page refreshed');
});
</script>

参考资料：

1. uni-app生命周期官方文档
2. Vue3生命周期详解