微信小程序開發(fā)中組件的生命周期詳細(xì)介紹
組件的生命周期
組件的生命周期,指的是組件自身的一些函數(shù),這些函數(shù)在特殊的時(shí)間點(diǎn)或遇到一些特殊的框架事件時(shí)被自動(dòng)觸發(fā)。
其中,最重要的生命周期是 created、attached、 detached ,包含一個(gè)組件實(shí)例生命流程的最主要時(shí)間點(diǎn)。
自定義組件的生命周期函數(shù)
小程序組件可用的全部生命周期如下表所示:
生命周期函數(shù) | 參數(shù) | 描述說明 |
---|---|---|
created | 無 | 在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行 |
attached | 無 | 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行 |
ready | 無 | 在組件在視圖層布局完成后執(zhí)行 |
moved | 無 | 在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹另一個(gè)位置時(shí)執(zhí)行 |
detached | 無 | 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行 |
error | Object Error | 每當(dāng)組件方法拋出錯(cuò)誤時(shí)執(zhí)行 |
執(zhí)行順序
從該圖中可以看出組件的 ready 與 detached 執(zhí)行順序并沒有明確的先后關(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)入頁面節(jié)點(diǎn)樹后,attached生命周期函數(shù)會(huì)被觸發(fā),此時(shí), this.data已被初始化完畢。這個(gè)生命周期很有用,絕大多數(shù)初始化的工作可以在這個(gè)時(shí)機(jī)進(jìn)行(例如發(fā)請(qǐng)求獲取初始數(shù)據(jù))
- 在組件離開頁面節(jié)點(diǎn)樹后,detached生命周期函數(shù)會(huì)被觸發(fā),退出一個(gè)頁面時(shí),會(huì)觸發(fā)頁面內(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'); } } )}
注意:若不寫在lifetime節(jié)點(diǎn)中且同時(shí)存在lifetime節(jié)點(diǎn),優(yōu)先執(zhí)行l(wèi)ifetime節(jié)點(diǎn)中的生命周期函數(shù),并覆蓋掉節(jié)點(diǎn)之外的生命周期函數(shù)。
組件所在頁面的生命周期函數(shù)
有時(shí),自定義組件的行為依賴于頁面狀態(tài)的變化,此時(shí)就需要用到組件所在頁面的生命周期。
在自定義組件中,組件所在頁面的生命周期函數(shù)有如下3個(gè),分別是:
生命周期函數(shù) | 參數(shù) | 描述 |
---|---|---|
show | 無 | 組件所在的頁面被展示時(shí)執(zhí)行 |
hide | 無 | 組件所在的頁面被隱藏時(shí)執(zhí)行 |
resize | object Size | 組件所在的頁面尺寸變化時(shí)執(zhí)行 |
pageLifetimes節(jié)點(diǎn)
組件所在頁面的生命周期函數(shù),需要定義在pageLifetimes節(jié)點(diǎn)中,如下:
Component({ pageLifetimes:{ show(){ console.log("show!!"); }, hide(){ console.log("hide!!"); }, resize(){ console.log("resize"); } } )}
當(dāng)頁面顯示和隱藏時(shí)觸發(fā)
到此這篇關(guān)于微信小程序開發(fā)中組件的生命周期詳細(xì)介紹的文章就介紹到這了,更多相關(guān)小程序生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信域名檢測(cè)接口調(diào)用演示步驟(含PHP、Python)
這篇文章主要介紹了微信域名檢測(cè)接口調(diào)用演示步驟(含PHP、Python),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Javascript實(shí)現(xiàn)通過選擇周數(shù)顯示開始日和結(jié)束日的實(shí)現(xiàn)代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)通過選擇周數(shù)顯示開始日和結(jié)束日的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對(duì)js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧2022-09-09使用window.postMessage()方法在兩個(gè)網(wǎng)頁間傳遞數(shù)據(jù)
這篇文章介紹了使用window.postMessage()在兩個(gè)網(wǎng)頁間傳遞數(shù)據(jù)的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-062012世界末日倒計(jì)時(shí)代碼 原來沒事虛驚一場(chǎng)
這款時(shí)世界末日倒計(jì)時(shí)源代碼,程序上有JS控制器,是用于網(wǎng)頁中顯示的倒計(jì)時(shí)器,自己可以設(shè)定世界末日的開始時(shí)間,網(wǎng)頁倒計(jì)時(shí)世界末日源代碼直接復(fù)制就可以用2012-12-12javascript 封裝的一個(gè)實(shí)用的焦點(diǎn)圖切換效果
之前有一篇博客,實(shí)用的焦點(diǎn)圖切換效果,結(jié)構(gòu)行為相分離 解釋的比較詳細(xì),腳本是分離式的,但在易用性和重用性方面并不理想,這里原作者進(jìn)行了,優(yōu)化。2010-07-07淺析location.href跨窗口調(diào)用函數(shù)
本文詳細(xì)介紹了location.href跨窗口調(diào)用函數(shù),具體的使用方法及實(shí)例,有需要的朋友可以參考下2016-11-11JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果
這篇文章主要為大家詳細(xì)介紹了JS DOM實(shí)現(xiàn)鼠標(biāo)滑動(dòng)圖片效果,只要將鼠標(biāo)放上該商品的區(qū)域,原本折疊起來的商品便會(huì)自動(dòng)展開,感興趣的小伙伴們可以參考一下2016-03-03javascript中checkbox使用方法實(shí)例演示
這篇文章通過簡(jiǎn)單的實(shí)例演示了javascript中checkbox使用方法,感興趣的小伙伴們可以參考一下2015-11-11