一、生命周期

概念

生命周期（Life Cycle）是指一個(gè)對(duì)象從創(chuàng)建-->運(yùn)行-->銷毀的整個(gè)階段

小程序的生命周期

• 小程序啟動(dòng)，表示生命周期的開始
• 小程序關(guān)閉。表示生命周期的結(jié)束
• 中間小程序的整個(gè)運(yùn)行過(guò)程就是小程序的生命周期

分類

應(yīng)用生命周期

特指小程序從啟動(dòng)-->運(yùn)行-->銷毀的過(guò)程

頁(yè)面生命周期

特指小程序中每個(gè)頁(yè)面的加載-->渲染-->銷毀的整個(gè)過(guò)程

自定義組件生命周期

• 組件實(shí)例被創(chuàng)建
• 組件完全初始化完畢
• 組件進(jìn)入頁(yè)面節(jié)點(diǎn)樹
• 組件離開頁(yè)面節(jié)點(diǎn)樹

其中，頁(yè)面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大，如圖：

二、生命周期函數(shù)

概念

是由小程序框架提供的內(nèi)置函數(shù) ，會(huì)伴隨著生命周期，自動(dòng)按次序執(zhí)行

作用

允許程序員在特定的時(shí)間點(diǎn)，執(zhí)行某些特定的操作

分類

1）小程序應(yīng)用生命周期函數(shù)

伴隨著小程序的整個(gè)生命周期：?jiǎn)?dòng)-->運(yùn)行-->銷毀

需要在app.js文件中進(jìn)行聲明，示例代碼如下：

App({
    //小程序初始化完成會(huì)執(zhí)行onLaunch，全局只會(huì)觸發(fā)一次，用于頁(yè)面初始化相關(guān)工作
    onLaunch:function(options){ },
    //小程序啟動(dòng)時(shí)或者從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)onShow
    onShow:function(options){ },
    //小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)onHide
    onHide:function(options){ }
})

2）小程序頁(yè)面生命周期函數(shù)

伴隨著小程序頁(yè)面的整個(gè)生命周期：加載-->渲染-->銷毀

需要在頁(yè)面.js文件中進(jìn)行聲明，示例代碼如下：

Page({
    onLoad:function(options){ },//監(jiān)聽頁(yè)面的加載，只會(huì)調(diào)用一次
    onShow:function(options){ },//監(jiān)聽頁(yè)面顯示
    onReady:function(options){ },//監(jiān)聽頁(yè)面初次渲染完成，只會(huì)調(diào)用一次
    onHide:function(options){ },//監(jiān)聽頁(yè)面隱藏
    onUnload:function(options){ },//監(jiān)聽頁(yè)面卸載，只會(huì)調(diào)用一次
})

3）小程序自定義組件的生命周期函數(shù)

分別是created、attached、detached函數(shù)

第一，當(dāng)組件實(shí)例剛被創(chuàng)建完成，觸發(fā)created函數(shù)

• 但此時(shí)還不能調(diào)用setData函數(shù)
• 在這時(shí)間點(diǎn)，只用于給組件的this添加一些自定義的屬性字段

第二，當(dāng)組件完全初始化完畢進(jìn)入頁(yè)面節(jié)點(diǎn)樹，觸發(fā)attached函數(shù)

• 此時(shí)，this.data已經(jīng)被初始化完畢
• 最為關(guān)鍵的生命周期，可以進(jìn)行大多數(shù)初始化的工作，例如發(fā)送網(wǎng)絡(luò)請(qǐng)求獲取頁(yè)面的初始數(shù)據(jù)

第三，當(dāng)組件離開頁(yè)面節(jié)點(diǎn)樹后，觸發(fā)detached函數(shù)

• 退出一個(gè)頁(yè)面時(shí)，會(huì)觸發(fā)頁(yè)面內(nèi)每個(gè)自定義組件的detached函數(shù)
• 此時(shí)適合做一些清理性質(zhì)的收尾工作

組件全部的生命周期函數(shù)如下：

4）定義組件的生命周期函數(shù)

在小程序組件中，組件的生命周期函數(shù)的定義有新舊兩種方式

• 第一種，直接定義在Component構(gòu)造器內(nèi)與data節(jié)點(diǎn)平級(jí)的第一級(jí)參數(shù)中
• 第二種，可以在lifetimes字段內(nèi)進(jìn)行聲明（推薦，其優(yōu)先級(jí)最高，且專門放生命周期函數(shù)）

自定義組件.js文件

//定義組件生命周期函數(shù)的兩種方式
Component({
     //推薦用法
     lifetimes:{
         attached(){ },
         detached(){ },
      }
     //舊的定義方式，與data節(jié)點(diǎn)平級(jí)
      attached(){ },
      detached(){ },
})

注：如果同時(shí)存在兩種新舊定義方式，那么舊的定義方式將會(huì)被覆蓋掉

三、總結(jié)

• 生命周期強(qiáng)調(diào)的是一個(gè)時(shí)間段，一個(gè)過(guò)程
• 生命周期函數(shù)強(qiáng)調(diào)的是某個(gè)時(shí)間點(diǎn)，是過(guò)程中的某個(gè)節(jié)點(diǎn)
• 注意區(qū)別不同類別的生命周期函數(shù)，不能搞混淆

到此這篇關(guān)于微信小程序中的生命周期與生命周期函數(shù)淺析介紹的文章就介紹到這了,更多相關(guān)小程序生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論