repository·master·Indexed 12 days ago
https://github.com/meituan-dianping/mpvueA Vue.js-based framework for developing Mini Programs across WeChat, Baidu, Toutiao, and Alipay platforms. Based on Vue 2.4.1, it enables the use of Vue components, Vuex, and Webpack to build maintainable Mini Program applications with support for H5 to Mini Program compilation and a dedicated ecosystem of loaders and tools.
mpvue is a frontend framework for developing Mini Programs using Vue.js. It is a fork of vuejs/vue@2.4.1 that preserves the Vue runtime capabilities while adding support for Mini Program platforms.
Supported platforms include:
By modifying the runtime framework and the code compiler, mpvue brings the Vue.js development experience to the Mini Program ecosystem.
vue-server-renderer package provides Node.js server-side rendering (SSR) capabilities for Vue 2.0 applications. It allows you to render Vue component trees into HTML strings on the server, which can then be sent to the client for faster initial page loads and improved SEO.Officially supports Baidu Smart Mini Program, Toutiao Mini Program, and Alipay Mini Program. New projects created with mpvue-quickstart will default to 2.0.
Note: For upgrading existing projects, refer to the mpvue 2.0 Upgrade Guide.
For projects that do not wish to upgrade to 2.0, the 1.x major version is available and is maintained at the 1.4.x level.
Using mpvue provides several capabilities built upon the Mini Program technical stack:
vue-cli command-line tool.Use npm install vue-template-compiler to install the package. This package is intended for developers writing build tools with specific needs to pre-compile Vue 2.0 templates into render functions, helping to avoid runtime-compilation overhead and CSP restrictions.
Note: For most use cases, you should use vue-loader or vueify instead, as they use this package internally.
npm install vue-template-compilerThe Vue.js SSR benchmark is designed for stress and regression testing. It renders a large table consisting of 1,000 rows and 10 columns (totaling 10,000 components) and approximately 30,000 normal elements. This benchmark is specifically used to compare the performance of renderToString against renderToStream.
Note that completion times may vary based on system resources like available memory and CPU processing power at runtime.
npm run bench:ssr$attrs and $listeners are exposed on the instance prototype. These are reactive and allow Higher-Order Components (HOCs) to pass through attributes and event listeners to a wrapped child component.To minimize the overhead of setData in Mini Programs, mpvue implements a data diffing mechanism (diffData). Instead of sending the entire state, it calculates the minimal set of paths required to update the Mini Program's data.
$root.0._mpProps.key) to target specific fields.minifyDeepData recursively traverses the data tree to find only the changed parts, preventing unnecessary re-renders of large objects.__keyPath to track which parts of an object have changed, allowing it to perform granular updates on nested structures.Vue$3.config._mpTrace is enabled, mpvue provides a diffLog that outputs the total amount of data (in KB) updated within a 500ms window to help developers debug performance issues.mpvue maps Vue lifecycle hooks to Mini Program (MP) lifecycles. Depending on whether the instance is an App, a Page, or a Component, different hooks are triggered.
When the mpType is app, mpvue uses the global App constructor. The following mappings occur:
onLaunch: Triggered when the app launches. Passes options to the Vue instance.onShow: Triggered when the app becomes visible.onHide: Triggered when the app is hidden.onError: Triggered on app errors.onPageNotFound: Triggered when a page is not found.When the mpType is component, mpvue uses the global Component constructor. The following mappings occur:
created: Executes when the component instance enters the node tree. Note: Do not call setData during this stage.attached: Executes when the component is attached to the node tree. Triggers the Vue attached hook.ready: Executes when the component layout is complete. Triggers the Vue ready hook. It is recommended to use this.$nextTick after ready to perform setData operations.moved: Executes when the component is moved within the node tree.detached: Executes when the component is removed from the node tree.When the mpType is page, mpvue uses the global Page constructor. The following mappings occur:
onLoad(query): Triggered when the page loads. Passes query to the Vue instance.onShow(): Triggered when the page is shown.onReady(): Triggered when the page's initial render is complete.onHide(): Triggered when the page is hidden.onUnload(): Triggered when the page is unloaded.onPullDownRefresh(): Triggered on pull-to-refresh.onReachBottom(): Triggered when reaching the bottom of the page.onTabItemTap(options): Triggered when a tab item is tapped.onPageScroll(options): Triggered during page scrolling.onShareAppMessage(options): Triggered when the user clicks the share button. This is mapped from the Vue instance's onShareAppMessage option.mpvue uses a flattened, hierarchical data structure to represent the component tree in the Mini Program's native data store. This allows for efficient updates and lookups.
Structure Pattern:
Data is stored under a $root key. Each component's data is keyed by its unique component key ($k), which is a path-like string using _ as a separator (e.g., 1_2_1).
Example JSON Schema:
{
"$root": {
"1-1": {
"$k": "1-1",
"$kk": "1-1_",
"$p": "",
"someData": "value"
},
"1.2-1": {
"$k": "1.2-1",
"$kk": "1.2-1_",
"$p": "1.2",
"someData": "value2"
}
}
}Key Fields per Component:
$k: The component's unique key (path).$kk: The component's key followed by the separator (_).$p: The parent component's key.In mpvue's Mini-program compiler, slots are transformed into <template> nodes to support named and default slots within the Mini-program framework.
<slot> tag is encountered, it is wrapped in a <template> tag, and its name is used to register a template.slot attribute.slotId following the pattern: {moduleId}-{slotName}-{mpcomid} (with single quotes removed from the mpcomid).<template> nodes, and the component's own children list is cleared to prevent duplication.The <keep-alive> component is an abstract component used to cache component instances when they are toggled (e.g., during navigation).
It accepts two primary props:
include: A string, RegExp, or Array of component names to be cached.exclude: A string, RegExp, or Array of component names to be excluded from caching.When a component is cached, its deactivate hook is called instead of destroyed. When it is re-entered, the activated hook is called.
<keep-alive include=['MyComponent']>
<router-view></router-view>
</keep-alive>