UniAPP和Vue3生命周期hook

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

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

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

示例：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 文件中定义。

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

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 的生命周期钩子。这些钩子用于管理组件的创建、更新和销毁过程。

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

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

四、注意事项

1. 区分 App 和页面生命周期钩子：确保在正确的位置使用相应的生命周期钩子，如应用级钩子在 App.vue，页面级钩子在页面组件中。
2. 异步操作：在生命周期钩子中进行异步操作（如网络请求）时，注意处理好回调和错误，避免阻塞页面渲染。
3. 性能优化：合理利用生命周期钩子进行数据加载和资源管理，避免在频繁触发的钩子中执行重操作，如 onShow 和 onHide。

五、参考资料

• Uni-app 官方文档 - 生命周期
• Vue.js 官方文档 - 生命周期钩子