一、組件的生命周期
1.1 組件全部的生命周期函數(shù)
小程序組件可用的全部生命周期如下表所示
| 生命周期函數(shù) | 參數(shù) | 描述說(shuō)明 |
|---|---|---|
| created | 無(wú) | 在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行 |
| attached | 無(wú) | 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行 |
| ready | 無(wú) | 在組件在視圖層布局完成后執(zhí)行 |
| moved | 無(wú) | 在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹(shù)另一個(gè)位置時(shí)執(zhí)行 |
| detached | 無(wú) | 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行 |
| error Object | Error | 每當(dāng)組件方法拋出錯(cuò)誤時(shí)執(zhí)行 |
1.2 組件主要的生命周期函數(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ì)的工作
/**
* 組件的初始數(shù)據(jù)
*/
data: {
_rgb:{
// rgb 的顏色值對(duì)象
r:0,
g:0,
b:
},
fullColor: '0, 0, 0' //根據(jù)rgb對(duì)象的三個(gè)屬性，動(dòng)態(tài)計(jì)算fullColor 的值
},
})
生命周期函數(shù) 參數(shù) 描述
show 無(wú) 組件所在的頁(yè)面被展示時(shí)執(zhí)行
hide 無(wú) 組件所在的頁(yè)面被隱藏時(shí)執(zhí)行
resize Object Size 組件所在的頁(yè)面尺寸變化時(shí)執(zhí)行
1.3 lifetimes 節(jié)點(diǎn)
在小程序組件中，生命周期函數(shù)可以直接定義在 Component 構(gòu)造器的第一級(jí)參數(shù)中，可以在 lifetimes字段內(nèi)進(jìn)行聲明（ 這是推薦的方式，其優(yōu)先級(jí)最高 ）。示例代碼如下：
二、組件所在頁(yè)面的生命周期
2.1 什么是組件所在頁(yè)面的生命周期
有時(shí)， 自定義組件的行為依賴于頁(yè)面狀態(tài)的變化 ，此時(shí)就需要用到 組件所在頁(yè)面的生命周期 。例如：每 當(dāng)觸發(fā)頁(yè)面的 show 生命周期函數(shù)的時(shí)候，我們希望能夠重新生成一個(gè)隨機(jī)的 RGB 顏色值。在自定義組件中，組件所在頁(yè)面的生命周期函數(shù)有如下 3 個(gè)，分別是：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-500750.html
// components/test3/test3.js
Component({
//舊式的定義方式
created() {
console.log('created'); //在組建實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
},
attached(){
console.log('attached'); //在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
},
// 推薦用法
lifetimes:{
created() {
console.log('created~'); //在組建實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹(shù)時(shí)執(zhí)行
},
attached(){
console.log('attached~');//在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹(shù)移除時(shí)執(zhí)行
},
}
})
2.2 pageLifetimes 節(jié)點(diǎn)
組件所在頁(yè)面的生命周期函數(shù)，需要定義在 pageLifetimes 節(jié)點(diǎn)中，示例代碼如下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500750.html
2.3 生成隨機(jī)的 RGB 顏色值
// components/test3/test3.js
Component({
pageLifetimes:{
show(){
console.log('show');
},
hide(){
console.log('hide');
},
resize(){
console.log('resize');
}
}
})
// components/test3/test3.js
Component({
/**
* 組件的方法列表
*/
methods: {
changeR到了這里，關(guān)于【微信小程序】生命周期，插槽和組件間通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
