Mastering Uniapp5 Page Lifecycle: When Pages Load, Refresh, and Destroy

Core Goal

Master the five core page‑lifecycle callbacks of Uniapp5, understand when each is triggered, where to place data handling, and how to refresh pages on return to write stable, bug‑free code.

Prerequisite

Familiarity with page navigation, data requests, and basic syntax.

1. What Is a Page Lifecycle?

A page progresses through creation → display → render → hide → destroy . Different lifecycle stages require different actions.

2. The Five Core Lifecycle Callbacks (High‑Frequency)

1. onLoad – Page Load (executes once)

Trigger: First time the page opens.

Typical work: Retrieve page parameters, initiate network requests, initialize data.

Characteristic: Not re‑executed when returning to the page.

onLoad(options) {
  console.log('页面加载了', options)
  // Get page parameters (e.g., product ID, user ID)
  this.id = options.id
  // Request page data (only once)
  this.getData()
}

2. onShow – Page Show (executes every time)

Trigger: Page opened, switched back from background, or returned from a sub‑page.

Typical work: Refresh data such as shopping cart, favorites, or personal center.

Characteristic: Runs whenever the page becomes visible.

onShow() {
  console.log('页面显示了')
  // Refresh list when returning
  this.getCartList()
}

3. onReady – Page Render Complete (executes once)

Trigger: First time rendering finishes.

Typical work: Manipulate DOM, obtain node information, create animations.

Characteristic: DOM is fully rendered.

onReady() {
  console.log('页面渲染完毕')
  // Get element info, create animations, etc.
}

4. onHide – Page Hide

Trigger: Navigating away, app goes to background, or tab switch.

Typical work: Pause playback, clear timers, stop refreshing.

onHide() {
  console.log('页面隐藏了')
  // Clear timers
  clearInterval(this.timer)
}

5. onUnload – Page Unload

Trigger: Page closed or destroyed when returning.

Typical work: Clean up resources, cancel requests, remove listeners.

onUnload() {
  console.log('页面销毁了')
  // Cancel requests, clear listeners
}

3. Execution Order

Open page: onLoad → onShow → onReady

Return to page: onShow

Navigate away: onHide → onUnload

4. Practical Decision: Put Data Requests in onLoad or onShow?

✅ Use onLoad (request once)

Product detail pages

Article detail pages

Pages that do not need frequent refresh

✅ Use onShow (refresh on every return)

Shopping cart

Personal center

Favorites list

Order list

5. Classic Real‑World Example: List → Detail → Return Refresh

List Page (onShow refresh)

export default {
  data() {
    return { list: [] }
  },
  // Refresh each time we return
  onShow() {
    this.getList()
  },
  methods: {
    getList() {
      uni.request({
        url: 'https://xxx.com/api/list',
        success: (res) => {
          this.list = res.data
        }
      })
    }
  }
}

Detail Page (onLoad receives parameters)

export default {
  onLoad(options) {
    // Receive product ID
    this.id = options.id
    this.getDetail()
  },
  methods: {
    getDetail() { /* ... */ }
  }
}

6. Four Common Pitfalls for Beginners

Repeated requests when data is placed in onShow: Apply debounce/throttle or move logic to onLoad.

Page does not refresh on return: Move the request to onShow.

onLoad cannot get parameters: Use options.xxx and ensure parameters are passed during navigation.

onUnload not executed on tab pages: Tab pages are not destroyed; use onHide for cleanup.