uniapp vue3 常用的生命周期和作用使用时机

在 uni-app + Vue3 项目中，会接触到三类生命周期，我按重要程度和应用范围排了序，每个都会配上一个简洁的使用示例。

📊 UniApp Vue3 三类生命周期

• 1. 应用生命周期 (App.vue) ：控制应用启动、前后台切换和全局异常。最重要的两个钩子是从 @dcloudio/uni-app 中导入的 onLaunch 和 onShow。

• 2. 页面生命周期 (pages目录下的vue文件) ：核心生命周期，控制页面加载、渲染、显示隐藏等。最重要的钩子是从 @dcloudio/uni-app 中导入的 onLoad, onShow, onReady。

• 3. 组件生命周期 (components目录下的vue文件) ：原生 Vue3 组件生命周期，控制组件挂载、更新和销毁。最重要的钩子是从 vue 中导入的 onMounted, onBeforeUnmount, onUpdated。

---

1. 应用生命周期（核心，必须在 App.vue 中使用）

控制应用的启动、前后台切换和异常捕获。

• onLaunch ：应用初始化完成时触发，全局只触发一次。

  • 作用：进行全局性的、只需执行一次的任务。

  • 时机 ：最早，适合做全局初始化、获取系统信息、检查登录状态、全局变量定义等。

  • 示例：

    javascript
    
    // App.vue
    <script setup>
    import { onLaunch, onShow, onHide, onError } from '@dcloudio/uni-app';
    
    onLaunch(() => {
      console.log('App Launch');
      // 检查登录状态、获取系统信息等
      uni.getSystemInfo({
        success: (res) => {
          console.log('设备信息:', res);
        }
      });
    });
    
    onShow(() => {
      console.log('App Show');
      // 应用从后台切换到前台时，刷新数据或状态
    });
    
    onHide(() => {
      console.log('App Hide');
      // 应用切换到后台时，暂停某些操作（如轮询、音视频播放）
    });
    
    onError((err) => {
      console.error('App Error:', err);
      // 全局错误监控与上报
    });
    </script>

2. 页面生命周期（核心，用于 pages/ 下的页面组件）

从打开一个新页面到关闭它的完整过程，用于处理页面内的数据、网络请求和交互。

• onLoad：页面加载时触发。

  • 作用：接收上个页面传递的参数，进行页面初始化操作、发起网络请求。

  • 时机 ：页面加载时调用一次，有参数（上一个页面传递的数据）。

  • 示例：

    javascript
    
    // pages/user/profile.vue
    <script setup>
    import { ref } from 'vue';
    import { onLoad, onShow } from '@dcloudio/uni-app';
    
    const userId = ref('');
    
    onLoad((option) => {
      console.log('接收到的参数:', option);
      userId.value = option.id;
      // 根据ID请求用户详情数据
      fetchUserDetail(option.id);
    });
    
    const fetchUserDetail = (id) => {
      // 模拟API请求
      console.log(`请求用户ID为 ${id} 的详情`);
    };
    </script>

• onShow：页面显示/切入前台时触发。

  • 作用：页面每次显示都需要刷新的逻辑。

  • 时机 ：频繁触发（从子页面返回、应用从后台切回等）。

  • 示例：

    javascript
    
    <script setup>
    import { onShow } from '@dcloudio/uni-app';
    
    onShow(() => {
      console.log('页面显示');
      // 每次回到这个页面都刷新列表数据
      refreshList();
    });
    
    const refreshList = () => {
      console.log('刷新列表');
    };
    </script>

• onReady：页面初次渲染完成时触发。

  • 作用：执行需要等待页面渲染完成的逻辑。

  • 时机：页面渲染完成后调用一次，此时可以操作页面元素。

  • 示例：

    javascript
    
    <script setup>
    import { onReady } from '@dcloudio/uni-app';
    
    onReady(() => {
      console.log('页面渲染完成');
      // 可以在这里初始化图表、地图等需要DOM就绪的库
      initChart();
    });
    
    const initChart = () => {
      console.log('初始化图表');
    };
    </script>

• onHide：页面隐藏/切入后台时触发。

  • 作用：页面隐藏时需要暂停或清理的工作。

  • 时机：页面不再可见时触发。

  • 示例：

    javascript
    
    <script setup>
    import { onHide } from '@dcloudio/uni-app';
    
    onHide(() => {
      console.log('页面隐藏');
      // 暂停音视频播放、停止轮询等
      pauseVideo();
    });
    
    const pauseVideo = () => {
      console.log('暂停视频');
    };
    </script>

• onUnload：页面卸载时触发。

  • 作用：清理页面产生的全局事件、定时器等资源。

  • 时机：页面被销毁时调用一次。

  • 示例：

    javascript
    
    <script setup>
    import { onUnload } from '@dcloudio/uni-app';
    
    let timer = null;
    
    // 假设在某个地方启动了定时器
    timer = setInterval(() => {
      console.log('定时任务执行');
    }, 1000);
    
    onUnload(() => {
      console.log('页面卸载，清理资源');
      // 清除定时器，避免内存泄漏
      if (timer) clearInterval(timer);
    });
    </script>

• onPullDownRefresh：下拉刷新时触发。

  • 作用：监听用户下拉刷新动作，加载最新数据。

  • 时机：用户主动下拉。

  • 示例：

    javascript
    
    <script setup>
    import { onPullDownRefresh } from '@dcloudio/uni-app';
    
    onPullDownRefresh(() => {
      console.log('下拉刷新');
      // 请求新数据
      fetchNewData().then(() => {
        // 数据加载完成后停止下拉刷新动画
        uni.stopPullDownRefresh();
      });
    });
    
    const fetchNewData = async () => {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log('数据已更新');
          resolve();
        }, 1000);
      });
    };
    </script>

• onReachBottom：滚动到底部时触发。

  • 作用：实现列表的分页加载、上拉加载更多。

  • 时机：页面滚动到底部。

  • 示例：

    javascript
    
    <script setup>
    import { ref } from 'vue';
    import { onReachBottom } from '@dcloudio/uni-app';
    
    const page = ref(1);
    
    onReachBottom(() => {
      console.log('触底加载更多');
      page.value++;
      loadMoreData(page.value);
    });
    
    const loadMoreData = (pageNum) => {
      console.log(`加载第 ${pageNum} 页数据`);
    };
    </script>

• 其他页面生命周期 ：onPageScroll(滚动监听)、onTabItemTap(点击tab)、onResize(窗口尺寸变化) 等。

3. 组件生命周期（核心，用于 components/ 下的组件）

控制组件的创建、挂载、更新和销毁过程。

• setup()：组合式 API 的入口。

  • 作用 ：定义响应式数据、函数，替代 beforeCreate 和 created。

  • 时机 ：最早，组件实例初始化之前。

  • 示例：

    javascript
    
    <script setup>
    import { ref } from 'vue';
    
    // 定义响应式数据
    const count = ref(0);
    
    // 定义函数
    const increment = () => {
      count.value++;
    };
    </script>

• onMounted：组件挂载完成时触发。

  • 作用：执行需要 DOM 就绪的操作，如操作 DOM 元素、初始化第三方库。

  • 时机：组件渲染完成后。

  • 示例：

    javascript
    
    <script setup>
    import { onMounted } from 'vue';
    
    onMounted(() => {
      console.log('组件已挂载');
      // 可以安全地操作DOM
      // 初始化第三方库，如ECharts、Swiper等
    });
    </script>

• onBeforeUnmount：组件销毁前触发。

  • 作用：清理副作用，如清除定时器、取消事件监听等，防止内存泄漏。

  • 时机：组件卸载之前。

  • 示例：

    javascript
    
    <script setup>
    import { onBeforeUnmount } from 'vue';
    
    let timer = null;
    
    timer = setInterval(() => {
      console.log('定时任务');
    }, 1000);
    
    onBeforeUnmount(() => {
      console.log('组件即将销毁，清理定时器');
      if (timer) clearInterval(timer);
    });
    </script>

• 其他组件生命周期 ：onBeforeMount(挂载前)、onBeforeUpdate(更新前)、onUpdated(更新后)、onUnmounted(已销毁)、onActivated/onDeactivated(keep-alive专用)。

⏱️ 关键执行顺序

当 uni-app 页面加载时，各类生命周期的典型触发顺序如下：

页面首次加载 ：

onLoad (页面加载) -> onShow (页面显示) -> onBeforeMount (组件挂载前) -> onReady (页面初次渲染完成) -> onMounted (组件挂载完成)

页面关闭/返回 ：

onBeforeUnmount (组件销毁前) -> onUnload (页面卸载)