組件的生命周期

組件的生命周期，指的是組件自身的一些函數(shù)，這些函數(shù)在特殊的時(shí)間點(diǎn)或遇到一些特殊的框架事件時(shí)被自動(dòng)觸發(fā)。

其中，最重要的生命周期是 created、attached、 detached ，包含一個(gè)組件實(shí)例生命流程的最主要時(shí)間點(diǎn)。

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

小程序組件可用的全部生命周期如下表所示:

執(zhí)行順序

從該圖中可以看出組件的 ready 與 detached 執(zhí)行順序并沒(méi)有明確的先后關(guān)系。

組件常用的生命周期函數(shù)

在小程序組件中，最重要的生命周期函數(shù)有3個(gè)，分別是created、attached.

detached。它們各自的特點(diǎn)。如下︰

• 組件實(shí)例剛被創(chuàng)建好的時(shí)候，created生命周期函數(shù)會(huì)被觸發(fā)，此時(shí)還不能調(diào)用setData，通常在這個(gè)生命周期函數(shù)中，只應(yīng)該用于給組件的this添加一些自定義的屬性字段在組件
• 完全初始化完畢、進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)后，attached生命周期函數(shù)會(huì)被觸發(fā)，此時(shí), this.data已被初始化完畢。這個(gè)生命周期很有用，絕大多數(shù)初始化的工作可以在這個(gè)時(shí)機(jī)進(jìn)行（例如發(fā)請(qǐng)求獲取初始數(shù)據(jù))
• 在組件離開(kāi)頁(yè)面節(jié)點(diǎn)樹(shù)后，detached生命周期函數(shù)會(huì)被觸發(fā)，退出一個(gè)頁(yè)面時(shí)，會(huì)觸發(fā)頁(yè)面內(nèi)每個(gè)自定義組件的detached生命周期函數(shù)此時(shí)適合做一些清理性質(zhì)的工作

lifetimes節(jié)點(diǎn)

在小程序組件中，生命周期函數(shù)可以直接定義在Component構(gòu)造器的第一級(jí)參數(shù)中，可以在 lifetimes字段內(nèi)進(jìn)行聲明（這是推薦的方式，其優(yōu)先級(jí)最高）。如下:

Component({
	lifetimes:{
	   created(){
	       console.log('created');
	   },
	   attached(){
	       console.log('attached');
	   }
	}
)}

注意：若不寫(xiě)在lifetime節(jié)點(diǎn)中且同時(shí)存在lifetime節(jié)點(diǎn)，優(yōu)先執(zhí)行l(wèi)ifetime節(jié)點(diǎn)中的生命周期函數(shù)，并覆蓋掉節(jié)點(diǎn)之外的生命周期函數(shù)。

組件所在頁(yè)面的生命周期函數(shù)

有時(shí)，自定義組件的行為依賴于頁(yè)面狀態(tài)的變化，此時(shí)就需要用到組件所在頁(yè)面的生命周期。

在自定義組件中，組件所在頁(yè)面的生命周期函數(shù)有如下3個(gè)，分別是:

pageLifetimes節(jié)點(diǎn)

組件所在頁(yè)面的生命周期函數(shù)，需要定義在pageLifetimes節(jié)點(diǎn)中，如下:

Component({
	pageLifetimes:{
      	show(){
           console.log("show!!");
       },
       hide(){
           console.log("hide!!");
       },
       resize(){
           console.log("resize");
       }						
   }				
)}

當(dāng)頁(yè)面顯示和隱藏時(shí)觸發(fā)

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

最新評(píng)論