最近在開發(fā)小程序，嘗試性地使用了一下

mpvue 是一個使用 Vue.js 開發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了整套 Vue.js 開發(fā)體驗。

mpvue同時維護(hù)了Vue和小程序的兩套機(jī)制，因此需要對兩套機(jī)制進(jìn)行關(guān)聯(lián)。這里主要對mpvue的生命周期來進(jìn)行一些梳理。

微信小程序生命周期

首先我們需要了解，微信小程序的生命周期：

App對象，主要有onLaunch, onShow和onHide。

Page對象，主要有onLoad, onShow, onReady, onHide和onUnload。

Vue到mpvue

mpvue的出現(xiàn)使得我們可以用書寫Vue實(shí)例的方式去聲明這兩種對象，并使得Vue實(shí)例兼容小程序的生命周期。

Vue的生命周期主要體現(xiàn)在8個鉤子：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed。

來對比一下Vue和mpvue的生命周期，看一下mpvue做出了什么改變：

對比來看，mpvue主要是對created和beforeMount之間的過程做了改變。

在Vue中，這個階段主要作用是將template編譯為render函數(shù)：

而在mpvue中，對于App或Page組件(這里的Is App or Page component應(yīng)該要解釋為“是否為App或Page組件”)，為他們初始化小程序的生命周期，并注冊App對象或Page對象：

這里可以看出來，mpvue中，Vue和小程序生命周期鉤子觸發(fā)的基本順序是beforeCreate -> created -> onLaunch/onLoad -> onShow -> onReady -> beforeMount -> mounted -> ...

實(shí)踐驗證

這里有一個入口頁面，包含一個通過wx.navigateTo跳轉(zhuǎn)到newPage的按鈕。

newPage中包含一個card組件，和一個通過wx.navigateBack跳轉(zhuǎn)回入口頁面的按鈕。

在App, newPage和card的各個生命周期鉤子輸出信息，來觀察它們的觸發(fā)情況和順序。

在App被創(chuàng)建，跳轉(zhuǎn)到newPage前

我們可以觀察到，app對象首先被創(chuàng)建，觸發(fā)onLaunch和onShow。

在這之后，newPage被create。需要注意的是，此時我們還沒有跳轉(zhuǎn)到newPage，也就是說在mpvue中，無論頁面是否被訪問到，其Vue實(shí)例的beforeCreate和created都在app創(chuàng)建后就被觸發(fā)。

第一次跳轉(zhuǎn)到newPage并返回入口頁面

由于newPage頁面的beforeCreate和created已經(jīng)提前被觸發(fā)過了，在調(diào)用了wx.NavigateTo跳轉(zhuǎn)到newPage時，先觸發(fā)小程序的生命周期，再觸發(fā)beforeMount，這時候開始創(chuàng)建子組件card的實(shí)例，按照beforeCreate -> created -> onLoad -> onReady -> beforeMount -> mounted 的順序觸發(fā)生命周期鉤子。(這里組件的onShow為什么沒有觸發(fā)..需要再深入探究一下)

在wx.navigateBack時，小程序的生命周期鉤子onUnload被觸發(fā)。但需要注意的是：Vue的生命周期鉤子beforeDestroy和destroyed并沒有被觸發(fā)，也就是說小程序中newPage的page對象被卸載了，但newPage和card的Vue實(shí)例并沒有被銷毀。

第二次跳轉(zhuǎn)到newPage并返回入口頁面

newPage和card都已經(jīng)被create且沒有destroy，在再次wx.navigateTo時將直接從onLoad -> onShow -> onReady開始觸發(fā)，newPage的mount和update過程也會出發(fā)，而component之后update過程被觸發(fā)了。這里可以發(fā)現(xiàn)，在onLoad之后還經(jīng)過了幾個階段，才開始觸發(fā)Vue實(shí)例的生命周期鉤子，而上一次保存在內(nèi)存中的數(shù)據(jù)并沒有被destroy，因此在重新加載的過程中，Vue實(shí)例還保存著上一次加載頁面時的數(shù)據(jù)。

開發(fā)時遇到的問題

遇到的問題主要是由create過程在頁面加載前就被統(tǒng)一觸發(fā)引起的。 在使用Vue時，經(jīng)常在created鉤子中獲得新的data。因為此時對data的數(shù)據(jù)觀測已經(jīng)被建立，但是頁面內(nèi)容尚未被掛載，Vue實(shí)例可以觀測到data的變化并在視圖顯示出來之前改變其內(nèi)容。

如果在mpvue中，我們想獲取頁面路由query中的數(shù)據(jù)，或是想在頁面創(chuàng)建時請求接口，我們可能會這樣考慮：

在created中獲取數(shù)據(jù)？ 在mpvue中，created只被觸發(fā)一次，且在頁面創(chuàng)建前被觸發(fā)，也就是說query中的數(shù)據(jù)是無法獲得的，再次訪問頁面時如果數(shù)據(jù)發(fā)生了變化，created中的邏輯也并不會再次執(zhí)行。

推遲到beforeMount？ 從功能上說，在beforeMount獲取數(shù)據(jù)是沒有問題的。但由于頁面unload時沒有觸發(fā)destroy，在再次加載頁面時，Vue實(shí)例仍然保存著前一次獲得的數(shù)據(jù)，而頁面的onLoad、onShow均在beforeMount之前被觸發(fā)，實(shí)踐時會發(fā)現(xiàn)，頁面在數(shù)據(jù)更新之前就會被顯示出來，舊的數(shù)據(jù)會在頁面中“一閃而過”。

在onLoad中獲取數(shù)據(jù)？ 實(shí)踐證明這的確是一種最穩(wěn)妥的方法，數(shù)據(jù)能被正確地設(shè)置，頁面也不會“閃”。 但是官方文檔有這樣一句話： 除特殊情況外，不建議使用小程序的生命周期鉤子。 這里大概是為了代碼的移植性做考慮吧，不知道這里算不算特殊情況呢。

使用computed？ 為了避免使用小程序的生命周期鉤子，還可以考慮使用computed的來獲取query中的內(nèi)容，而query需要在頁面onLoad之后才存在，這里需要注意做一些判斷。

總結(jié)

從Vue過度到mpvue還是非常平滑的，特別是在有過小程序開發(fā)經(jīng)驗的情況下。但是由于小程序本身和瀏覽器的差異，使得開發(fā)過程中會遇到一些難以理解的問題，將生命周期做一下梳理對更順利地進(jìn)行開發(fā)是有一些好處的。

但是，從這里也可以看到，對于開發(fā)小程序來說，mpvue實(shí)際上額外地維護(hù)了一套Vue的機(jī)制，并對小程序的事件、數(shù)據(jù)進(jìn)行代理、同步，實(shí)際上這個過程可能會造成一些性能上的損耗。再加上mpvue目前還是存在一些缺陷，而小程序也支持了數(shù)據(jù)綁定、組件化開發(fā)，個人認(rèn)為若是追求高質(zhì)量的開發(fā)還是直接使用原生小程序更優(yōu)吧~

總結(jié)

以上是生活随笔為你收集整理的mpvue还在维护吗_mpvue 微信小程序开发之生命周期的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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