mpvue生命週期初探

最近使用了 mpvue 搭建並開發了公司一個小程序項目，週末花點時間研究一下 Vue.js 組件生命週期和小程序頁面生命週期的調用順序問題。

正文

準備知識

先上 mpvue 生命週期官方圖解：

小程序只有一個 App 實例，對應 mpvue 項目的 App.vue 裏面的內容，全頁面共享，mpvue 爲這個實例以及組件（組件包括：tabBar 頁、普通頁、通常組件）添加了 Vue.js 的一些生命週期方法。

固然這些生命週期並非在 App 實例 和組件中都有。

頁面之間

APP 實例

它的生命週期永遠是最早執行的，順序爲：beforeCreate,created,onLaunch,beforeMount,mounted,onShow（後面例子省略這部份內容）。

一個頁面

App.vue
   |--- Page0.vue（默認打開頁面）
複製代碼

Page0.vue 順序執行：

• beforeCreate
• created
• onLoad
• onShow
• onReady
• beforeMount
• mounted

多個頁面

// app.json（注意順序）
{
    pages: [
        '/pages/Page0/main',
        '/pages/Page2/main',
        '/pages/Page1/main',
    ]
}

// 頁面結構
App.vue
   |--- Page0.vue（默認頁面）
   |--- Page1.vue
   |--- Page2.vue
複製代碼

小程序啓動會註冊 app.json 的 pages 屬性中定義的全部頁面，並依次觸發每一個頁面的 beforeCreate,created，而這對函數的執行前後，取決於頁面在 pages 屬性中的順序。

而小程序啓動必定須要打開一個首頁（這個首頁必定是在 pages 中第一個），這個頁面的 onLoad~mounted 是在最後一個頁面的 created 以後執行：

頁面之間跳轉（也叫路由切換）

頁面分：tabBar 頁和普通頁，二者之間跳轉有限制：

• navigateTo, redirectTo 只能打開非 tabBar 頁面
• switchTab 只能打開 tabBar 頁面

表格內所有按順序觸發，- 開頭的表示第一次進入才觸發，+ 開頭表示再次進入才觸發，沒有符號的表示每次進入都觸發

1.open-type="navigate"：

當前頁面	目標頁面	當前頁觸發	目標頁面觸發
普通頁	普通頁	onHide	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁	tabBar頁	onUnload	- onLoad onShow - onReady - beforeMount - mounted
tabBar頁	普通頁	onHide	onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁	tabBar頁	onHide	- onLoad onShow - onReady - beforeMount - mounted

2.open-type="redirect"：

當前頁面	目標頁面	當前頁觸發	目標頁面觸發	說明
普通頁	普通頁	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁	tabBar頁			不支持
tabBar頁	普通頁	onUnload	onLoad onShow onReady beforeMount mounted
tabBar頁	tabBar頁			不支持

3.open-type="reLaunch"：

當前頁面	目標頁面	當前頁觸發	目標頁面觸發
普通頁	普通頁	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁	tabBar頁	onUnload	+ onUnload onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁	普通頁	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁	tabBar頁	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted

若是 reLaunch 當前頁面，小程序框架以棧形式維護的頁面，會順序出棧並觸發頁面的 onUnload，而後觸發當前頁的：

• onLoad
• onShow
• onReady
• beforeMount
• beforeUpdate
• mounted

4.open-type="navigateBack"，須要配合 delta 屬性使用，它的表現同下面描述的左上角返回按鈕。

• delta 超過頁面棧數量，返回到第一個頁面
• delta <= 0 時，返回上一個頁面

5.tabBar 點擊切換

當前頁觸發	目標頁面觸發
onHide	- onLoad onShow - onReady - beforeMount - mounted

6.左上角返回按鈕

這個按鈕只在普通頁中存在

當前頁觸發	目標頁面觸發
onUnload	onShow

最後

onLaunch 和 onError 只存在於 App 實例中，其餘頁面或組件替代 onLaunch 的是 onLoad，沒有 onError

Demo 源碼在此，後面找時間研究一下頁面內使用通常組件時，他們生命週期的關係以及異步數據處理的問題。