生命周期

页面生命周期

提示

页面级组件既有 页面生命周期，也有 组件生命周期

页面状态：

onLoad：页面加载时触发。
- 接收上一个页面传递的参数（通过 options 参数），适合 初始化 页面数据
onShow：页面显示时触发，包括首次加载和从其他页面返回时。
- 适合执行页面显示时的逻辑，如：刷新数据
onReady：页面初次渲染完成时触发。
- 适合操作 DOM 或执行需要页面渲染完成后的逻辑
onHide：页面隐藏时触发，如跳转到其他页面。
- 适合清理页面隐藏时的逻辑，如取消定时器
onUnload：页面卸载时触发，如关闭页面或跳转到其他页面（不会返回）。
- 适合清理页面卸载时的逻辑，如释放资源

页面交互：

onPullDownRefresh：用户下拉页面时触发。
- 适合实现 下拉刷新 功能
onReachBottom：页面滚动到底部时触发。
- 适合实现 上拉加载 功能
onBackPress：用户点击返回按钮或 Android 物理返回键时触发。
- 适合 拦截返回 操作
onTabItemTap：点击底部 tab 时触发。
- 适合监听 tab 切换 事件
...

示例

composition-apioptions-api

import { ref, onLoad, onShow, onReady, onHide, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uniapp'

const xRef = ref(null)

onLoad((options) => {})

onShow(() => {})

onReady((options) => {
  console.log(xRef.value)
})

onHide(() => {})

onUnload(() => {})

// 监听用户下拉动作
onPullDownRefresh(() => {
  setTimeout(() => {
    uni.stopPullDownRefresh() // 关闭刷新 loading
  }, 1000)
})

// 页面滚动到底部时触发
onReachBottom(() => {
  // 由于 onReachBottom 一段时间内不可重复触发，所以为了兼容快速向上滑动的情况，需增加一段时间的延迟，防止触底事件失效
  setTimeout(() => {
    // ...
  }, 500)
})

// ...

export default {
  onLoad(options) {},
}

组件生命周期

提示

组件级组件只有 组件生命周期。
uniapp 组件支持的生命周期，与 vue 标准组件的生命周期相同。

beforeCreate：在实例初始化之前被调用。
created：在实例创建完成后被立即调用。
beforeMount：在挂载开始之前被调用。
mounted：挂载到实例上去之后调用（处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用 $nextTick）。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
- 仅 H5 平台支持。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- 仅 H5 平台支持。
beforeDestroy：实例销毁之前调用（在这一步，实例仍然完全可用）。

生命周期 ​

页面生命周期 ​

示例 ​

组件生命周期 ​

生命周期

页面生命周期

示例

组件生命周期