組件生命周期函數

1. 前言

不少同學可能會有疑問，在前面小節講過了應用生命周期函數和頁面生命周期函數，怎么又出來了一個組件生命周期函數…

其實應用生命周期函數和頁面生命周期函數是 uni-app 中自帶的，而組件生命周期函數是 Vue 的特性。大部分情況下，這些生命周期函數可以合并在一起使用，個別情況會有一些區別。

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

2. 各類生命周期函數的區別

應用生命周期函數比較好區分，是用來監聽整個應用的。有一個很好的判斷方法就是，寫在 App.vue 文件中生命周期函數就是應用生命周期函數。

頁面生命周期函數和組件生命周期函數都是對一個頁面中狀態的監聽，比較容易混淆。

簡單來說，應用生命周期函數僅在 page 頁面有效，在單獨封裝的組件中無效。但是組件生命周期函數在 page 頁面和單獨封裝的組件中都有效。

3. 組件生命周期函數

4. 組件生命周期函數應用

我們在前面小節創建的 Login 組件中驗證組件生命周期函數的應用， Login 組件是我們前面小節實現的一個登錄彈窗組件。

4.1 添加代碼

打開 components/login/login.vue 文件，在 script 標簽中添加生命周期函數。要注意這些函數不要寫在 methods 中，與 methods 是同級函數。
實例：

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

4.2 查看效果

點擊工具欄–運行–運行到內置瀏覽器，打開控制臺，控制臺中會打印下面的信息：

beforeCreate：實例初始化
created：實例創建完成
beforeMount：模板編譯之前
mounted：模板編譯完成

點擊授權登錄按鈕，會繼續打印下面信息，登錄彈窗實例就被銷毀了：

beforeDestroy：實例銷毀之前
destroyed：實例銷毀完成

5. 組件生命周期函數與頁面生命周期函數的聯合使用

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

5.1 添加代碼

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

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

5.2 查看效果

點擊工具欄–運行–運行到內置瀏覽器，控制臺中會打印下面的信息：

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

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

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

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

6. 小結

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

本節課程我們主要介紹了組件生命周期函數，本節課程的重點如下：

• 能區分組件生命周期函數和頁面生命周期函數，知道兩者并不沖突；
• 了解組件生命周期函數的用法；
• 了解組件生命周期函數、頁面生命周期函數的應用場景。