在小程序的开发过程中踩了许多坑，生命周期的运用是其中的一个。我们接触到最多的生命周期是page生命周期/组件生命周期，当然还有app的生命周期，不在这里讨论。下面的内容以个人开发中的理解来说明。

page生命周期

• onLoad
  页面初始化
• onReady
  页面及元素准备妥当，对应web/html中的onLoad
• onShow
  页面显示时
• onHide
  页面被覆盖/路由跳转时(wx.nativeTo)
• onUnload
  页面被销毁时，比如从B页面返回A页面，B页面会触发该方法

组件生命周期

• created
  组件初始化时
• attached
  组件被接入到page的节点时
• ready
  组件准备妥当时，已经产生了结构
• detached
  组件被从page中的节点移除时

这里以官方的方式解释了一下各个生命周期的字面意思，但在开发过程中我们需要比较升入的了解到各个生命周期的执行顺序、触发条件等细节

准备一个简单的环境

创建一个简单组件

// 组件名称 aaa
{
    lifetimes: {
        created: {},
        attached: {
            this.setData({...})
        },
        ready: {},
        detached: {}
    }
}

创建一个应用页面及模板

wxml

pages/index.wxml

<aaa wx:if="{{dataSource}}" ds="{{dataSource}}" />

js

pages/index.js

page({
    data: {
        dataSource: {...}
    },
    onLoad(){},
    onReady(){}
})

执行次数

一次性生命周期

以上生命周期中有几个是一次性的生命周期方法，即被执行过后不再被执行

page.onLoad
page.onReady
page.onUnload
lifetimes.created
lifetimes.attached
lifetimes.ready
lifetimes.detached

其中page.onReady和lifetimes.ready是最容易被误解的生命周期方法，开发过程中我们使用this.setData处理数据时总认为这两个方法会被再次触发，经过本人多次实践得到的结论是不会

多次性生命周期

具备条件出发的生命周期方法，当满足一定条件时会被触发

page.onHide
page.onShow

page.onHide在路由(wx.nativeTo)跳转时触发
page.onShow在路由(wx.nativeBack)调回时触发，或者返回时触发
基于上述两种生命周期的特性，我们可以在hide和show方法中去处理/销毁/重置/刷新等操作

执行顺序

page的正常顺序

1. page.onLoad
2. page.onShow // show方法确实是在ready之前，试过很多次
3. page.onReady

组件的正常顺序

1. created
2. attached
3. ready

业务中同步顺序

开发中需要混合使用page及组件，以上面的例子为模板，当一个页面被正常载入时列出的生命周期执行顺序

1. lifetimes.created
2. lifetimes.attached
3. page.onLoad
4. lifetimes.ready
5. page.onReady

业务中的异步顺序

这里先要改写一下上面的列子

js

pages/index.js

page({
    data: {
        dataSource: null
    },
    onLoad(){},
    onReady(){
        setTimeout(()=>{
            this.setData({
                dataSource: {...}
            })
        }, 1000)
    }
})

通常我们都需要获取后端数据后再设置元素，这时的执行顺序是

1. page.onLoad
2. page.onReady
3. lifetimes.created
4. lifetimes.attached
5. lifetimes.ready // 组件ready的执行在page.onReady之后

上面的例子非常简单，仅仅是能够说明执行顺序的异同，但在正常的业务中，页面由非常多的组件构成，并且需要处理同步及异步数据，再加上UE的交互需求，很容易出现各种状况, 这篇文章仅说明本人开发中的理解，不对的地方希望指正留言

小程序开源项目： https://github.com/webkixi/aotoo-xquery