mpvue小程序生命週期詳解

mpvue繼承自Vue.js,其技術規範和語法特點與 Vue.js保持一致，所以具備vue知識儲備的同學用mpvue開發小程序很快就能上手。我覺得mpvue比較容易混淆的就是生命週期，mpvue除了Vue 本身的生命週期外,還兼容了小程序的生命週期,接下來就通過實例講解一下生命週期的執行順序。

一、生命週期分三個部分

app生命週期+vue生命週期+小程序自有生命週期，所以我會把這三個類型的生命週期通過console打印出來，通過page-app、page-index、page-user區分不同頁面。

①在app.vue頁面，打印app級別生命週期

②在首頁打印vue生命週期和小程序自有生命週期

③個人中心頁也是一樣打印

二、通過打印信息，看執行順序

①初次加載頁面進入首頁時的生命週期顯示，剛好看到可以分爲三部分

1、首先是app級別的生命週期 onLanunch和onShow(無論後面頁面如何調整，只在app進來只執行一次)

2、所有頁面的beforeCreatre、created  的vue生命週期(也是隻執行一次)

3、進入首頁時的生命週期，小程序生命週期onLoad onShow onReady --->vue生命週期 beforeMount、mount

②那從 首頁 調整到 個人中心頁的生命週期怎麼走？（此次操作是通過tab跳轉）

也是分爲了三部分，具體看圖，需要注意的是 從首頁到個人中心頁面，首頁的destroyed銷燬生命週期並沒有走，所以需要銷燬定時器等耗時任務的放在這個生命週期沒有用。

③還有一些從 個人中心頁返回首頁，或者按home鍵退出再返回的生命週期怎麼走等等，大家可以試一下。

我把生命週期打印的格式貼出來

// vue 生命週期 
beforeCreate () {
	console.log('vue [page-index] beforeCreate')
},
created () { 
	console.log('vue [page-index] created') 
},
beforeMount () { 
	console.log('vue [page-index] beforeMount') 
},
mounted () { 
	console.log('vue [page-index] mounted') 
},
beforeUpdate () { 
	console.log('vue [page-index] beforeUpdate')
},
updated () { 
	console.log('vue [page-index] updated') 
},
activated () { 
	console.log('vue [page-index] activated, mpvue 實際運行並沒有回調, 原因不支持 keep-alive')
},
deactivated () {
	console.log('vue [page-index] deactivated, mpvue 實際運行並沒有回調, 原因不支持 keep-alive') 
},
beforeDestroy () {
	console.log('vue [page-index] beforeDestroy, mpvue 實際運行並沒有回調, bug')
},
destroyed () { 
	console.log('vue [page-index] destroyed, mpvue 實際運行並沒有回調, bug') 
},


//app 部分：

onLaunch () {
	console.log('小程序 [page-index] 生命週期: onLaunch: 初始化') 
},
onShow () {
	console.log('小程序 [page-index] 生命週期: onShow: 當小程序啓動，或從後臺進入前臺顯示') 
},
onHide () {
	console.log('小程序 [page-index] 生命週期: onHide: 當小程序從前臺進入後臺') 
},
// 小程序頁面自有生命週期 
onLoad () {
	console.log('小程序 [page-index] 生命週期: onLoad: 監聽頁面加載') 
},
onShow () {
	console.log('小程序 [page-index] 生命週期: onShow: 監聽頁面顯示') 
},
onReady () { 
	console.log('小程序 [page-index] 生命週期: onReady: 監聽頁面初次渲染完成') },
onHide () { 
	console.log('小程序 [page-index] 生命週期: onHide: 監聽頁面隱藏')
},
onUnload () {
	console.log('小程序 [page-index] 生命週期: onUnload: 監聽頁面卸載') 
},
onPullDownRefresh () {
	console.log('小程序 [page-index] 生命週期: onPullDownRefresh: 監聽用戶下拉動作') 
},
onReachBottom () {
	console.log('小程序 [page-index] 生命週期: onReachBottom: 頁面上拉觸底事件的處理函數') 
},
onShareAppMessage () {
	console.log('小程序 [page-index] 生命週期: onShareAppMessage: 用戶點擊右上角分享')
},
onPageScroll () {
	console.log('小程序 [page-index] 生命週期: onPageScroll: 頁面滾動') 
},
onResize () { 
	console.log('小程序 [page-index] 生命週期: onResize: 寬高改變') 
},
onTabItemTap (item) {
	console.log('小程序 [page-index] 生命週期: onTabItemTap: 當前是 tab 頁時，點擊 tab 時觸發 （mpvue 0.0.16 支持）') 
}