page life cycle

[wangjing]

概述

在讲解页面生命周期之前, 我们先来了解几个概念:

• 栈: 遵循 LIFO 的一种数据结构, 用来管理页面之间的关系.
• 前台: 小程序启动后，界面被展示给用户，此时小程序处于前台状态
• 后台: 当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间

当用户再次进入微信或再次打开小程序, 小程序又会从后台进入前台. 但如果用户很久没有再进入小程序, 或者系统资源紧张, 小程序可能被销毁, 即完全终止运行.

页面生命周期

• onLoad - 页面创建时执行
• onShow - 页面出现在前台时执行
• onReady - 页面首次渲染完毕时执行
• onHide - 页面从前台变为后台时执行
• onUnload - 页面销毁时执行

上面几个函数都是经常使用的, 下面来逐一讲解:

从入栈、出栈、前台、后台的维度来理解每个生命周期函数执行时机:

• 入栈

  • onLoad
  • onShow
  • onReady

• 前台

  • onShow

• 后台

  • onHide

• 出栈

  • onUnload

下面通过具体案例来理解.

案例

假设有页面 page1、page2 , 然后 page1 通过 navigateTo 进入 page2 , 然后返回 page1 退出小程序.

Page1

<template>
  <view class="container">
    Page1
  </view>
</template>

<script>
export default {
  onLoad() {
     // 页面创建时执行
     console.log("onLoad");
  },
  onShow	() {
     // 页面出现在前台时执行
     console.log("onShow");
  },
  onReady() {
      // 初次渲染完成
      console.log("onReady");
  },
  onHide() {
       // 后台
       console.log("onHide");
  },
  onUnload() {
       // 出栈
       console.log("onUnload");
  },
}
</script>

Page2

<template>
  <view class="container">
    Page2
  </view>
</template>

<script>
export default {
  onLoad() {
     // 页面创建时执行
     console.log("onLoad");
  },
  onShow	() {
     // 页面出现在前台时执行
     console.log("onShow");
  },
  onReady() {
      // 初次渲染完成
      console.log("onReady");
  },
  onHide() {
       // 后台
       console.log("onHide");
  },
  onUnload() {
       // 出栈
       console.log("onUnload");
  },
}
</script>

用户访问路径为: 进入小程序 -> Page1 -> Page2 -> Page1-> 退出小程序.

Page1 生命周期执行输出如下:

onLoad -> onShow -> onReady -> onHide -> onShow -> onUnload.

整个生命周期内 onLoad、onReady、onUnload 这三个事件仅执行一次. 而 onHide 和 onShow在每次页面隐藏和显示时都会触发.