生命周期

一个小程序完整的 生命周期 由 3 部分来组成：

1. 应用生命周期
2. 页面生命周期
3. 组件生命周期

应用生命周期（App）

应用生命周期需要在 app.js 文件中的 App() 方法中进行定义，由三个函数组成：

App({
  // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {},
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow: function (options) {},
  // 当小程序从前台进入后台，会触发 onHide
  onHide: function () {},
})

页面生命周期（Page）

页面生命周期需要在 pages 目录下的 *.js 文件中的 Page() 方法进行定义，由四个函数组成：

Page({
  // 监听页面加载
  onLoad(options) {},
  // 监听页面初次渲染完成
  onReady() {},
  // 监听页面显示
  onShow() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
})

提示

• 在 Taro 中，通常以 useXxx 的形式来命名生命周期函数，例如 useLoad、useReady 等，参考 React Hooks。
• 在 Uniapp (Vue3) 中，通常以 onXxx 的形式来命名生命周期函数，例如 onLoad、onReady 等，参考 Composition API。

组件生命周期（Component）

Component({
  // lifetimes 组件生命周期声明对象
  lifetimes: {
    // 在组件实例刚刚被创建时执行；此时还不能调用 setData；通常用于一些初始化操作
    created() {},
    // 在组件实例进入页面节点树时执行；此时可以调用 setData；通常用于初始化数据或请求数据
    attached() {},
    // 在组件布局完成后执行；此时可以获取到节点的信息（如宽度、高度等）；通常用于操作 DOM 或执行一些依赖于布局的逻辑
    ready() {},
    // 在组件实例被移动到节点树另一个位置时执行；通常用于处理组件位置变化后的逻辑
    moved() {},
    // 在组件实例被从页面节点树移除时执行；通常用于清理工作，如取消定时器、解绑事件等
    detached() {},
  },
  // pageLifetimes 组件所在页面的生命周期声明对象
  pageLifetimes: {
    show() {},
    hide() {},
    // ...
  },
})

提示

• 在 Taro 中，并没有名为 useAttached 的 Hook。应该使用 React 的标准 Hook useEffect 来模拟 attached 和 detached；对于需要操作节点信息的 ready 阶段，请使用 Taro 提供的 useReady。
• 在 uniapp (Vue3) 中，并没有名为 onAttached 的 Hook。应该使用 Vue 官方的 onMounted 来模拟 attached；对于布局完成阶段，请使用 uniapp 提供的 onReady。