uni-app 生命周期

前言

uni-app 的生命周期主要分为：应用生命周期、页面生命周期、组件生命周期三种

一、应用生命周期（App.vue中声明）

注意：仅在App.vue中有效，在其他页面监听无效

触发场景：整个应用的初始化、前后台切换等全局行为

常用钩子：

• ​onLaunch
  应用初始化完成时触发（仅触发一次）
  典型用途：全局配置（如登录状态检测、系统信息获取）

• ​onShow
  应用启动或从后台进入前台时触发
  典型用途：恢复定时器、更新全局数据

• ​onHide
  应用从前台进入后台时触发
  典型用途：暂停动画、保存临时数据

• ​onError
  全局错误捕获（如脚本错误、API调用失败）

• ​onPageNotFound
  页面路径不存在时触发（用于自定义404跳转）

二、页面生命周期（pages目录下的.vue文件） 

页面生命周期函数主要在 pages 目录下的 .vue 文件中使用

这些函数涵盖了页面从创建到销毁的各个阶段

页面文件同时拥有两种生命周期：

1. ​页面特有生命周期​（如onLoad、onShow）
2. ​Vue组件标准生命周期​（如created、mounted）

常用钩子 ：

1、onLoad

• 触发时机：页面第一次加载时触发
• 场景：
  • 接收页面传递过来的参数
  • 发起接口请求，获取数据

export default {
    onLoad(options) {
        console.log('页面加载时接收到的参数:', options);
        this.fetchData();
    },
    methods: {
        fetchData() {
            // 请求接口数据
        }
    }
};

2、onShow

• 触发时机：页面每次显示时触发，包括从其他页面返回当前页面
• 场景：
  • 刷新页面数据
  • 检查登录状态等

export default {
    onShow() {
        console.log('页面显示时执行');
        this.checkLoginStatus();
    },
    methods: {
        checkLoginStatus() {
            // 检查登录状态
        }
    }
};

3、onReady

• 触发时机：页面初次渲染完成时触发，此时页面已经准备好可以与用户进行交互。
• 用途：
  • 进行DOM操作。
  • 初始化页面中的某些组件或插件。

三、组件生命周期（components目录下的.vue文件） 

注意：无页面特有钩子，组件不包含onLoad、onShow等页面级生命周期

遵循Vue标准生命周期：

 常用钩子：

四、生命周期执行顺序 

应用启动时：
App.onLaunch → App.onShow → Page.onLoad → Page.created → Page.onShow → Page.mounted → Page.onReady

页面跳转时（A→B）：
A.onHide → B.onLoad → B.created → B.onShow → B.mounted → B.onReady