Mastering mpvue: How Vue Lifecycle Maps to WeChat Mini‑Program Events

Recently developing a mini‑program, I tried the mpvue framework.

mpvue is a Vue.js based front‑end framework for developing mini‑programs using JavaScript.

mpvue maintains both Vue and mini‑program mechanisms, so we need to relate the two lifecycles. Below is a review of mpvue’s lifecycle.

WeChat Mini‑Program Lifecycle

App object has onLaunch, onShow, onHide. Page object has onLoad, onShow, onReady, onHide, onUnload.

From Vue to mpvue

mpvue lets you declare these objects with Vue instances, making Vue compatible with mini‑program lifecycle.

Vue has eight hooks: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed.

Comparison shows mpvue modifies the process between created and beforeMount.

In Vue, this stage compiles the template into a render function.

In mpvue, for App or Page components, it initializes the mini‑program lifecycle and registers the App or Page object.

The overall hook order in mpvue is beforeCreate → created → onLaunch/onLoad → onShow → onReady → beforeMount → mounted → …

Practical Verification

An entry page contains a button that navigates to a newPage; newPage contains a card component and a back button.

We log lifecycle hooks of App, newPage, and card to observe their trigger order.

Before navigating to newPage

The App object is created first, triggering onLaunch and onShow. Then newPage is created; its Vue beforeCreate and created run even before navigation.

First navigation to newPage and return

When navigating, the mini‑program lifecycle runs first, then beforeMount, creating the card component. The sequence is beforeCreate → created → onLoad → onReady → beforeMount → mounted. The onShow hook of the component does not fire.

On navigateBack, onUnload fires, but Vue’s beforeDestroy and destroyed do not, so the Vue instances remain in memory.

Second navigation to newPage and return

Since the Vue instances were not destroyed, the next navigation starts from onLoad → onShow → onReady, and the component’s update hooks fire, preserving previous data.

Issues Encountered

The early creation of Vue instances causes data obtained in created to be unavailable for query parameters. Getting data in created runs only once before the page is displayed.

Fetching data in beforeMount works but may cause stale data to flash because the page is shown before the data updates.

Fetching data in onLoad proves most reliable; the official docs advise avoiding mini‑program lifecycle hooks unless necessary.

除特殊情况外，不建议使用小程序的生命周期钩子。

Alternatively, using computed properties after onLoad can retrieve query data with proper checks.

Conclusion

Transitioning from Vue to mpvue is smooth, especially for developers with mini‑program experience. However, differences between mini‑programs and browsers introduce subtle lifecycle quirks; understanding them helps smoother development.

mpvue adds an extra Vue‑like layer, which may incur performance overhead and has some limitations; for high‑quality apps, native mini‑program development may be preferable.