前言

用惯了Uniapp，现在换成Taro有点不习惯，今天就来写一篇Taro里，小程序的生命周期有哪些以及在代码中如何使用？
在 Taro（基于 Vue 3）开发小程序时，生命周期分为 应用生命周期 和 页面生命周期，同时还支持 Vue 3 组件自身的生命周期（与小程序生命周期存在一定关联和调用时机差异）。

文档直通车（本篇文章中出现的文档，是Taro3版本的哦～）：基础教程/Vue/Vue3 Composition APIs

一、应用生命周期（全局仅触发一次）

应用生命周期是小程序启动到销毁的全局生命周期，定义在入口文件（通常是 app.vue 或 app.ts）中，通过 onLaunch、onShow 等函数触发，与 Vue 3 的 setup 无关，需直接暴露在导出对象中。

生命周期函数	触发时机	场景示例
onLaunch(options)	小程序初始化完成时触发（全局只触发一次）	初始化全局数据、获取启动参数
onShow(options)	小程序启动 / 从后台切换到前台时触发	恢复数据、更新页面状态
onHide()	小程序从前台切换到后台时触发）	保存临时数据、暂停定时器
onError(error)	小程序发生脚本错误或 API 调用失败时触发	收集错误日志
onPageNotFound(options)	小程序打开不存在的页面时触发（需在 app.json 中配置 pages 才能生效）	跳转到首页或错误页

代码示例：

<script lang="ts">
export default {
  // 应用生命周期
  onLaunch(options) {
    console.log('小程序初始化完成', options.query); // options 包含启动参数
  },
  onShow(options) {
    console.log('小程序进入前台', options.scene); // scene 表示启动场景值
  },
  onHide() {
    console.log('小程序进入后台');
  },
  onError(error) {
    console.error('发生错误', error);
  }
};
</script>

二、页面生命周期（每个页面单独触发）

页面生命周期是单个页面从创建到销毁的过程，定义在页面组件（pages/xxx.vue）中，可与 Vue 3 的 setup 结合使用（通过 onMounted 等钩子或直接暴露函数）。

1. 小程序原生页面生命周期以及Taro自定义 Composition APIs（直接暴露在组件导出对象中）

生命周期函数	Taro自定义的APIs	触发时机	对应 Vue 3 钩子（参考）
onLoad(options)	useLoad	页面加载时触发（仅触发一次），options 为页面路由参数	onMounted（但时机更早）
onShow()	useDidShow	页面显示 / 从后台切回前台时触发	-
onReady()	useReady	页面初次渲染完成时触发（仅触发一次），可获取页面元素尺寸	onMounted（更接近此时机）
onHide()	useDidHide	页面隐藏（如跳转到其他页面）时触发	-
onUnload()	useUnload	页面卸载（如从当前页面返回上一页）时触发	onUnmounted
onPullDownRefresh()	usePullDownRefresh	页面下拉刷新时触发（需在 page.json 中配置 enablePullDownRefresh: true）	-
onReachBottom()	useReachBottom	页面滚动到底部时触发（可配置 onReachBottomDistance 控制距离）	-
onShareAppMessage()	useShareAppMessage	用户点击右上角分享时触发	-
onShareTimeline()	useShareTimeline	监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容	-
onPageScroll(scrollTop)	usePageScroll	页面滚动时触发，scrollTop 为滚动距离	-
onResize()	useResize	小程序屏幕旋转时触发	-
onTabItemTap()	useTabItemTap	点击 tab 时触发	-
onAddToFavorites()	useAddToFavorites	监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容	-

1）官方文档的使用示例，如图：

2）我的使用示例（其实差不多啦，看你import的对象是谁），如图：

3）只支持微信小程序：

• useShareTimeline
  
• useAddToFavorites
  
• useSaveExitState
  

2. 与 Vue 3 组件生命周期的关联

在 Taro + Vue 3 中，页面组件同时支持 Vue 3 的组件生命周期（如 onMounted、onUnmounted），其调用时机与小程序页面生命周期的对应关系如下：

Vue 3 组件生命周期	触发时机	与小程序生命周期的关系
beforeCreate	组件实例创建前	在 onLoad 之前触发
created	组件实例创建后	在 onLoad 之前、beforeCreate 之后触发
beforeMount	组件挂载前	在 onLoad 之后、onReady 之前触发
onMounted	组件挂载完成	接近 onReady 时机（页面初次渲染完成后）
onUpdated	组件更新后	页面数据更新导致重新渲染后触发
onUnmounted	组件卸载后	与 onUnload 几乎同时触发（页面销毁时）

代码示例：（页面组件 pages/index.vue）

<template>
  <view>首页</view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

// Vue 3 组件生命周期
onMounted(() => {
  console.log('Vue 组件挂载完成（接近 onReady 时机）');
});

onUnmounted(() => {
  console.log('Vue 组件卸载（接近 onUnload 时机）');
});
</script>

<script lang="ts">
// 小程序页面生命周期（需单独导出，不能写在 setup 中）
export default {
  onLoad(options) {
    console.log('页面加载（首次进入）', options); // 如接收路由参数 id: { id: '123' }
  },
  onShow() {
    console.log('页面显示（每次进入/切回前台）');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onUnload() {
    console.log('页面卸载（离开页面）');
  },
  onPullDownRefresh() {
    console.log('下拉刷新触发');
    // 刷新完成后停止下拉动画
    Taro.stopPullDownRefresh();
  }
};
</script>

三、组件生命周期（非页面组件）

对于自定义组件（components/xxx.vue），仅支持 Vue 3 组件生命周期（onMounted、onUpdated 等），不支持小程序页面的 onLoad、onShow 等生命周期（这些是页面专属）。

代码示例：（自定义组件 components/MyComponent.vue）

<template>
  <view>{{ msg }}</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const msg = ref('自定义组件');

onMounted(() => {
  console.log('自定义组件挂载完成');
});
</script>

四、关键注意事项

1.生命周期函数的定义位置

应用生命周期和小程序页面生命周期（onLoad、onShow 等）必须直接暴露在组件的导出对象中（即 <script lang="ts"> export default { ... } </script>），不能写在 setup 函数或 <script setup> 中。
Vue 3 的组件生命周期（onMounted 等）必须写在 <script setup> 或 setup 函数中。
执行顺序（以页面加载为例）：beforeCreate → created → onLoad → beforeMount → onShow → onReady → onMounted。

2.页面与组件的区别

页面组件（pages/ 下）同时支持小程序页面生命周期和 Vue 组件生命周期。
自定义组件（components/ 下）仅支持 Vue 组件生命周期，不支持 onLoad 等页面生命周期。

3.路由相关生命周期

onUnload 触发时，页面已从路由栈中移除（如 Taro.navigateBack 返回到上一页）。
onHide 触发时，页面仍在路由栈中（如 Taro.navigateTo 跳转到新页面，当前页面被隐藏）。