生命周期

页面生命周期

提示

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

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

// 页面加载时触发
// 通过 options 参数接收上一个页面传递的参数
onLoad((options) => {
  // 适合初始化页面数据
})

// 页面显示时触发，包括首次加载和从其他页面返回时
onShow(() => {
  // 适合执行页面显示时的逻辑。如：刷新数据
})

// 页面初次渲染完成时触发
onReady((options) => {
  // 适合操作 DOM 或执行需要页面渲染完成后的逻辑
})

// 页面隐藏时触发，如跳转到其他页面
onHide(() => {
  // 适合清理页面隐藏时的逻辑，如取消定时器
})

// 页面卸载时触发，如关闭页面或跳转到其他页面（不会返回）
onUnload(() => {
  // 适合清理页面卸载时的逻辑，如释放资源
})

// 用户下拉页面时触发
onPullDownRefresh(() => {
  // 适合实现下拉刷新功能

  setTimeout(() => {
    uni.stopPullDownRefresh() // 关闭刷新 loading
  }, 1000)
})

// 页面滚动到底部时触发
onReachBottom(() => {
  // 适合实现上拉加载功能

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

// ...
// https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

组件生命周期

提示

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

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