小程序页面和组件的生命周期执行顺序

小程序页面常用生命周期

onReady(页面初次渲染完成)
onLoad(页面加载,一个页面执行一次)
onShow(页面显示)
onHide(页面隐藏)
onUnload(页面卸载)

小程序组件常用生命周期

created(组件实例刚刚被创建)
attached(组件实例进入页面节点树)
detached(组件实例被从页面节点树移除)
ready(视图层页面布局完成后执行)

执行顺序探究

方案设计

index页面和target都包含list组件，index页面添加按钮，点击跳转到target页面，在target页面点击返回上一级（小程序自带功能）。

index页面代码

  createPage({
    onReady() {
      console.log('页面1初次渲染完成 onReady')
    },
    onLoad() {
      console.log('页面1加载完成 onLoad')
    },
    onShow() {
      console.log('页面1显示 onShow')
    },
    onHide() {
      console.log('页面1隐藏 onHide')
    },
    onUnload() {
      console.log('页面1卸载 onUnload')
    },
    methods: {
      goTarget() {
        mpx.navigateTo({ url: './target'})
      }
    }
  })

list页面代码

    created() {
      console.log("组件:实例刚刚被创建时执行 created")
    },
    attached() { 
      console.log("组件:实例进入页面节点树时执行 attached")
    },
    ready() {
      console.log("组件:在视图层布局完成后执行 ready")
    },
    moved() {
      console.log("组件:实例被移动到节点树另一个位置时执行 moved")
    },
    detached() {
      console.log("组件:实例被从页面节点树移除时执行 detached")
    }

target页面代码同index

输出结果

小程序加载

点击跳转按钮

点击返回上一级

结果分析

页面维度

小程序加载默认进入index页面，index会进入页面栈中，点击跳转按钮index页面被隐藏（但不会被卸载，仍在页面栈中）target页面进入页面栈中，然后点击返回上一级按钮后会执行退栈操作，target页面被卸载，重新显示index页面。

组件维度

页面加载之前，他所包含的组件会先被创建一个实例，然后将他挂到页面节点树。当跳转页面时，如果仍然包含该组件，组件实例会被重新创建，并进入节点数。当包含该组件的页面卸载时，会先把该组件从页面节点树上移除后卸载。