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

1. 前言

不少同學(xué)可能會(huì)有疑問(wèn)，在前面小節(jié)講過(guò)了應(yīng)用生命周期函數(shù)和頁(yè)面生命周期函數(shù)，怎么又出來(lái)了一個(gè)組件生命周期函數(shù)…

其實(shí)應(yīng)用生命周期函數(shù)和頁(yè)面生命周期函數(shù)是 uni-app 中自帶的，而組件生命周期函數(shù)是 Vue 的特性。大部分情況下，這些生命周期函數(shù)可以合并在一起使用，個(gè)別情況會(huì)有一些區(qū)別。

那什么場(chǎng)景可以使用頁(yè)面生命周期函數(shù)，什么場(chǎng)景又可以使用組件生命周期函數(shù)呢？這些我們本小節(jié)來(lái)了解一下。

2. 各類(lèi)生命周期函數(shù)的區(qū)別

應(yīng)用生命周期函數(shù)比較好區(qū)分，是用來(lái)監(jiān)聽(tīng)整個(gè)應(yīng)用的。有一個(gè)很好的判斷方法就是，寫(xiě)在 App.vue 文件中生命周期函數(shù)就是應(yīng)用生命周期函數(shù)。

頁(yè)面生命周期函數(shù)和組件生命周期函數(shù)都是對(duì)一個(gè)頁(yè)面中狀態(tài)的監(jiān)聽(tīng)，比較容易混淆。

簡(jiǎn)單來(lái)說(shuō)，應(yīng)用生命周期函數(shù)僅在 page 頁(yè)面有效，在單獨(dú)封裝的組件中無(wú)效。但是組件生命周期函數(shù)在 page 頁(yè)面和單獨(dú)封裝的組件中都有效。

3. 組件生命周期函數(shù)

4. 組件生命周期函數(shù)應(yīng)用

我們?cè)谇懊嫘」?jié)創(chuàng)建的 Login 組件中驗(yàn)證組件生命周期函數(shù)的應(yīng)用， Login 組件是我們前面小節(jié)實(shí)現(xiàn)的一個(gè)登錄彈窗組件。

4.1 添加代碼

打開(kāi) components/login/login.vue 文件，在 script 標(biāo)簽中添加生命周期函數(shù)。要注意這些函數(shù)不要寫(xiě)在 methods 中，與 methods 是同級(jí)函數(shù)。
實(shí)例：

beforeCreate(){
    console.log('beforeCreate：實(shí)例初始化');
},
created(){
    console.log('created：實(shí)例創(chuàng)建完成');
},
beforeMount(){
    console.log('beforeMount：模板編譯之前');
},
mounted(){ 
    console.log('mounted：模板編譯完成');
},
beforeUpdate(){
    console.log('beforeUpdate：數(shù)據(jù)更新之前');
},
updated(){
    console.log('updated：數(shù)據(jù)更新完成');
},
beforeDestroy(){ 
    console.log('beforeDestroy：實(shí)例銷(xiāo)毀之前');
},
destroyed(){
    console.log('destroyed：實(shí)例銷(xiāo)毀完成');
}

4.2 查看效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，打開(kāi)控制臺(tái)，控制臺(tái)中會(huì)打印下面的信息：

beforeCreate：實(shí)例初始化
created：實(shí)例創(chuàng)建完成
beforeMount：模板編譯之前
mounted：模板編譯完成

點(diǎn)擊授權(quán)登錄按鈕，會(huì)繼續(xù)打印下面信息，登錄彈窗實(shí)例就被銷(xiāo)毀了：

beforeDestroy：實(shí)例銷(xiāo)毀之前
destroyed：實(shí)例銷(xiāo)毀完成

5. 組件生命周期函數(shù)與頁(yè)面生命周期函數(shù)的聯(lián)合使用

大家可能看到這里還有一點(diǎn)云里霧里，我們?cè)僭谡{(diào)用 Login 組件的 index 頁(yè)面中添加頁(yè)面生命周期函數(shù)，來(lái)看看這些生命周期函數(shù)是怎樣合作的。

5.1 添加代碼

打開(kāi) pages/index/index.vue 文件，在 script 標(biāo)簽中添加下面這些頁(yè)面生命周期函數(shù)。

onLoad() {
    console.log('頁(yè)面生命周期函數(shù)onLoad：頁(yè)面初始化')
},
onShow() {
    console.log('頁(yè)面生命周期函數(shù)onShow：頁(yè)面顯示')
},
onReady(){
    console.log('頁(yè)面生命周期函數(shù)onReady：頁(yè)面初次顯示')
}

5.2 查看效果

點(diǎn)擊工具欄–運(yùn)行–運(yùn)行到內(nèi)置瀏覽器，控制臺(tái)中會(huì)打印下面的信息：

頁(yè)面生命周期函數(shù) onLoad：頁(yè)面加載
頁(yè)面生命周期函數(shù) onShow：頁(yè)面顯示
beforeCreate：實(shí)例初始化
created：實(shí)例創(chuàng)建完成
beforeMount：模板編譯之前
mounted：模板編譯完成
頁(yè)面生命周期函數(shù) onReady：頁(yè)面初次顯示

頁(yè)面生命周期函數(shù) onLoad、onShow 會(huì)先運(yùn)行，接著 Login 組件中的 beforeCreate、created 等組件生命周期函數(shù)開(kāi)始運(yùn)行。組件加載完成后，頁(yè)面生命周期函數(shù) onReady 開(kāi)始運(yùn)行。

我們會(huì)發(fā)現(xiàn)，有的頁(yè)面生命周期函數(shù)與組件生命周期函數(shù)，在項(xiàng)目開(kāi)發(fā)過(guò)程中功能會(huì)有點(diǎn)重復(fù)，比如 onLoad 和 created（里面都放的是頁(yè)面初始化時(shí)需要觸發(fā)的代碼）、onReady 和 mouted（里面都放的是頁(yè)面加載完成后只需要調(diào)用一次的代碼，比如用戶(hù)的登錄信息）

像這樣比較重復(fù)的生命周期函數(shù)，我們推薦使用頁(yè)面生命周期函數(shù)，比如：
組件生命周期函數(shù) created 可以替換為頁(yè)面生命周期中的 onLoad；
組件生命周期函數(shù) mouted 可以替換為頁(yè)面生命周期中的 onReady。

6. 小結(jié)

生命周期函數(shù)的種類(lèi)比較多，甚至有些函數(shù)功能是重復(fù)的可以互相替代，最好自己寫(xiě)代碼對(duì)比一下，加深理解。

本節(jié)課程我們主要介紹了組件生命周期函數(shù)，本節(jié)課程的重點(diǎn)如下：

• 能區(qū)分組件生命周期函數(shù)和頁(yè)面生命周期函數(shù)，知道兩者并不沖突；
• 了解組件生命周期函數(shù)的用法；
• 了解組件生命周期函數(shù)、頁(yè)面生命周期函數(shù)的應(yīng)用場(chǎng)景。