最近使用了 mpvue 搭建并開發(fā)了公司一個(gè)小程序項(xiàng)目，周末花點(diǎn)時(shí)間研究一下 Vue.js 組件生命周期和小程序頁(yè)面生命周期的調(diào)用順序問(wèn)題。

正文

準(zhǔn)備知識(shí)

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

小程序只有一個(gè) App 實(shí)例，對(duì)應(yīng) mpvue 項(xiàng)目的 App.vue 里面的內(nèi)容，全頁(yè)面共享，mpvue 為這個(gè)實(shí)例以及組件（組件包括：tabBar 頁(yè)、普通頁(yè)、一般組件）添加了 Vue.js 的一些生命周期方法。

當(dāng)然這些生命周期并不是在 App 實(shí)例 和組件中都有。

頁(yè)面之間

APP 實(shí)例

它的生命周期永遠(yuǎn)是最先執(zhí)行的，順序?yàn)?#xff1a;beforeCreate,created,onLaunch,beforeMount,mounted,onShow（后面例子省略這部分內(nèi)容）。

一個(gè)頁(yè)面

App.vue|--- Page0.vue（默認(rèn)打開頁(yè)面） 復(fù)制代碼

Page0.vue 順序執(zhí)行：

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

多個(gè)頁(yè)面

// app.json（注意順序） {pages: ['/pages/Page0/main','/pages/Page2/main','/pages/Page1/main',] }// 頁(yè)面結(jié)構(gòu) App.vue|--- Page0.vue（默認(rèn)頁(yè)面）|--- Page1.vue|--- Page2.vue 復(fù)制代碼

小程序啟動(dòng)會(huì)注冊(cè) app.json 的 pages 屬性中定義的所有頁(yè)面，并依次觸發(fā)每個(gè)頁(yè)面的 beforeCreate,created，而這對(duì)函數(shù)的執(zhí)行先后，取決于頁(yè)面在 pages 屬性中的順序。

而小程序啟動(dòng)一定需要打開一個(gè)首頁(yè)（這個(gè)首頁(yè)一定是在 pages 中第一個(gè)），這個(gè)頁(yè)面的 onLoad~mounted 是在最后一個(gè)頁(yè)面的 created 之后執(zhí)行：

頁(yè)面之間跳轉(zhuǎn)（也叫路由切換）

頁(yè)面分：tabBar 頁(yè)和普通頁(yè)，兩者之間跳轉(zhuǎn)有限制：

• navigateTo, redirectTo 只能打開非 tabBar 頁(yè)面
• switchTab 只能打開 tabBar 頁(yè)面

表格內(nèi)全部按順序觸發(fā)，- 開頭的表示第一次進(jìn)入才觸發(fā)，+ 開頭表示再次進(jìn)入才觸發(fā)，沒(méi)有符號(hào)的表示每次進(jìn)入都觸發(fā)

1.open-type="navigate"：

當(dāng)前頁(yè)面目標(biāo)頁(yè)面當(dāng)前頁(yè)觸發(fā)目標(biāo)頁(yè)面觸發(fā)

普通頁(yè)	普通頁(yè)	onHide	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁(yè)	tabBar頁(yè)	onUnload	- onLoad onShow - onReady - beforeMount - mounted
tabBar頁(yè)	普通頁(yè)	onHide	onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁(yè)	tabBar頁(yè)	onHide	- onLoad onShow - onReady - beforeMount - mounted

2.open-type="redirect"：

當(dāng)前頁(yè)面目標(biāo)頁(yè)面當(dāng)前頁(yè)觸發(fā)目標(biāo)頁(yè)面觸發(fā)說(shuō)明

普通頁(yè)	普通頁(yè)	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁(yè)	tabBar頁(yè)			不支持
tabBar頁(yè)	普通頁(yè)	onUnload	onLoad onShow onReady beforeMount mounted
tabBar頁(yè)	tabBar頁(yè)			不支持

3.open-type="reLaunch"：

當(dāng)前頁(yè)面目標(biāo)頁(yè)面當(dāng)前頁(yè)觸發(fā)目標(biāo)頁(yè)面觸發(fā)

普通頁(yè)	普通頁(yè)	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
普通頁(yè)	tabBar頁(yè)	onUnload	+ onUnload onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁(yè)	普通頁(yè)	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted
tabBar頁(yè)	tabBar頁(yè)	onUnload	onLoad onShow onReady beforeMount + beforeUpdate mounted

如果 reLaunch 當(dāng)前頁(yè)面，小程序框架以棧形式維護(hù)的頁(yè)面，會(huì)順序出棧并觸發(fā)頁(yè)面的 onUnload，然后觸發(fā)當(dāng)前頁(yè)的：

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

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

• delta 超過(guò)頁(yè)面棧數(shù)量，返回到第一個(gè)頁(yè)面
• delta <= 0 時(shí)，返回上一個(gè)頁(yè)面

5.tabBar 點(diǎn)擊切換

當(dāng)前頁(yè)觸發(fā)目標(biāo)頁(yè)面觸發(fā)

onHide	- onLoad onShow - onReady - beforeMount - mounted

6.左上角返回按鈕

這個(gè)按鈕只在普通頁(yè)中存在

當(dāng)前頁(yè)觸發(fā)目標(biāo)頁(yè)面觸發(fā)

onUnload	onShow

最后

onLaunch 和 onError 只存在于 App 實(shí)例中，其他頁(yè)面或組件替代 onLaunch 的是 onLoad，沒(méi)有 onError

Demo 源碼在此，后面找時(shí)間研究一下頁(yè)面內(nèi)使用一般組件時(shí)，他們生命周期的關(guān)系以及異步數(shù)據(jù)處理的問(wèn)題。

轉(zhuǎn)載于:https://juejin.im/post/5b49f07c5188251afa62c4b6

總結(jié)

以上是生活随笔為你收集整理的mpvue生命周期初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。