aboutToAppear 生命周期：路由参数获取与数据初始化

前言

在 ArkUI 中，aboutToAppear 是页面组件最重要的生命周期回调之一，它在页面即将显示时触发，适合进行数据初始化和路由参数获取。

"海风日记"的多个页面使用 aboutToAppear 获取路由参数、加载数据。本文将从源码出发，深入讲解 aboutToAppear 的用法和最佳实践。

一、aboutToAppear 的使用

1.1 日记详情页

typescript 复制代码

@Entry
@Component
struct DiaryDetailPage {
  private diary = MOCK_DIARIES[0]  // 默认值

  aboutToAppear() {
    const params = router.getParams() as Record<string, string>
    if (params && params.diaryId) {
      const found = MOCK_DIARIES.find(d => d.id === params.diaryId)
      if (found) this.diary = found
    }
  }
}

1.2 标签详情页

typescript 复制代码

@Entry
@Component
struct TagDetailPage {
  @State tagName: string = '生活记录'
  @State filteredDiaries: DiaryEntry[] = []

  aboutToAppear() {
    this.filteredDiaries = MOCK_DIARIES.filter(d => d.tags.includes(this.tagName))
  }
}

1.3 图片查看器

typescript 复制代码

@Entry
@Component
struct ImageViewerPage {
  @State currentIndex: number = 0

  aboutToAppear() {
    const params = router.getParams() as Record<string, number>
    if (params?.index !== undefined) {
      this.currentIndex = params.index
    }
  }
}

二、生命周期执行顺序

复制代码

aboutToAppear()  ← 1. 页面即将显示（获取参数、初始化数据）
    ↓
build()          ← 2. 构建 UI
    ↓
onPageShow()     ← 3. 页面已显示（刷新数据、恢复状态）

三、参数验证

typescript 复制代码

aboutToAppear() {
  const params = router.getParams() as Record<string, string>

  if (!params) {
    // 无参数时返回
    router.back()
    return
  }

  if (!params.diaryId) {
    // 缺少必要参数
    hilog.error(DOMAIN, TAG, '缺少 diaryId 参数')
    router.back()
    return
  }

  // 参数有效，加载数据
  this.loadDiary(params.diaryId)
}

四、生命周期使用场景

生命周期	使用场景
`aboutToAppear`	获取路由参数、初始化数据、发起网络请求
`onPageShow`	每次页面显示时刷新数据
`onPageHide`	暂停动画、保存草稿
`aboutToDisappear`	清理定时器、取消订阅

五、常见问题

5.1 参数获取不到

问题：router.getParams() 返回 undefined。

原因：在 build() 方法中调用，此时参数尚未传递完成。

解决方案 ：在 aboutToAppear() 中获取参数。

总结

本文通过"海风日记"的多个页面，深入讲解了 aboutToAppear 生命周期：

路由参数获取：getParams() 获取参数
数据初始化：加载默认数据
参数验证：确保参数有效
生命周期顺序：aboutToAppear → build → onPageShow

至此，第五系列"日记详情"全部完成 ！下一篇文章开始进入 第六系列：日历与年视图。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

页面生命周期文档
@ohos.router API
@Entry 装饰器文档
海风日记项目源码
$HarmonyOS 开发者官网$ (https://atomgit.com/openharmony/docs
开源鸿蒙跨平台社区