当前位置：首页 > article >正文

UniAPP和Vue3生命周期hook

article 2025/1/11 18:49:58

Uni-app 是一个使用 Vue.js 开发跨平台应用的框架，支持编译到多个平台（如 iOS、Android、H5、微信小程序等）。在 Uni-app 中，生命周期钩子（Lifecycle Hooks）用于在应用或页面的不同阶段执行特定的逻辑。理解和合理使用生命周期钩子，有助于优化应用的性能和用户体验。

一、应用（App）级生命周期钩子

这些钩子函数用于整个应用的生命周期管理，主要在 App.vue 文件中定义。

生命周期钩子	触发时机	说明
`onLaunch`	应用初始化时触发，只会触发一次	用于进行初始化操作，如获取全局数据、进行登录等
`onShow`	应用启动，或从后台切回前台时触发	适用于刷新数据或恢复应用状态
`onHide`	应用切到后台时触发	适用于保存应用状态、停止计时器等
`onError`	应用发生脚本错误时触发	用于错误日志收集和处理
`onPageNotFound`	当打开的页面不存在时触发	可以进行页面重定向或提示用户

示例：App.vue 中定义生命周期钩子

export default {
  onLaunch(options) {
    console.log('应用启动', options);
    // 初始化操作
  },
  onShow(options) {
    console.log('应用显示', options);
    // 恢复应用状态
  },
  onHide() {
    console.log('应用隐藏');
    // 保存应用状态
  },
  onError(error) {
    console.error('应用错误', error);
    // 错误处理
  },
  onPageNotFound(err) {
    console.warn('页面未找到', err);
    // 页面重定向
  }
}

二、页面级生命周期钩子

每个页面都有自己的生命周期钩子，用于管理页面在不同阶段的行为。这些钩子在页面的 .vue 文件中定义。

生命周期钩子	触发时机	说明
`onLoad`	页面加载时触发	接收路由参数，进行初始化
`onShow`	页面显示时触发	页面从后台或其他页面返回时调用
`onReady`	页面初次渲染完成时触发	适合进行与视图相关的操作
`onHide`	页面隐藏时触发	跳转到其他页面或应用进入后台
`onUnload`	页面卸载时触发	页面销毁前的清理操作
`onPullDownRefresh`	用户下拉刷新时触发	实现下拉刷新功能
`onReachBottom`	页面滚动到底部时触发	加载更多数据
`onShareAppMessage`	用户点击分享时触发	定制分享内容
`onShareTimeline`	用户分享到朋友圈时触发	定制分享到朋友圈的内容

示例：页面中的生命周期钩子

export default {
  data() {
    return {
      // 页面数据
    }
  },
  onLoad(options) {
    console.log('页面加载', options);
    // 初始化数据
  },
  onShow() {
    console.log('页面显示');
    // 刷新数据
  },
  onReady() {
    console.log('页面初次渲染完成');
    // 与视图相关的操作
  },
  onHide() {
    console.log('页面隐藏');
    // 保存页面状态
  },
  onUnload() {
    console.log('页面卸载');
    // 清理资源
  },
  onPullDownRefresh() {
    console.log('用户下拉刷新');
    // 刷新数据
    uni.stopPullDownRefresh(); // 停止下拉刷新
  },
  onReachBottom() {
    console.log('页面滚动到底部');
    // 加载更多数据
  },
  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/home/home',
      imageUrl: '/static/share.png'
    };
  },
  onShareTimeline() {
    return {
      title: '分享到朋友圈的标题'
    };
  }
}

三、组件级生命周期钩子

在 Uni-app 中，组件也有自己的生命周期钩子，类似于 Vue.js 的生命周期钩子。这些钩子用于管理组件的创建、更新和销毁过程。

生命周期钩子	触发时机	说明
`created`	组件实例创建后触发	数据初始化等操作
`mounted`	组件挂载到页面后触发	DOM 操作等
`updated`	组件数据更新后触发	响应数据变化
`destroyed`	组件销毁前触发	清理资源

示例：组件中的生命周期钩子

export default {
  data() {
    return {
      // 组件数据
    }
  },
  created() {
    console.log('组件创建');
    // 初始化数据
  },
  mounted() {
    console.log('组件挂载');
    // 访问 DOM
  },
  updated() {
    console.log('组件更新');
    // 响应数据变化
  },
  destroyed() {
    console.log('组件销毁');
    // 清理定时器等资源
  }
}