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

1. 前言

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

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

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

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

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

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

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

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

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

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

4.1 添加代碼

打開 components/login/login.vue 文件，在 script 標(biāo)簽中添加生命周期函數(shù)。要注意這些函數(shù)不要寫在 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í)例銷毀之前');
},
destroyed(){
    console.log('destroyed：實(shí)例銷毀完成');
}

4.2 查看效果

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

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

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

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

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

大家可能看到這里還有一點(diǎn)云里霧里，我們再在調(diào)用 Login 組件的 index 頁面中添加頁面生命周期函數(shù)，來看看這些生命周期函數(shù)是怎樣合作的。

5.1 添加代碼

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

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

5.2 查看效果

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

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

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

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

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

6. 小結(jié)

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

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

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