一、概念

mpvue是 美團 修改了 Vue.js 的 runtime 和 compiler 使其可以運行在小程序環(huán)境中，從而引入了整套 Vue.js 開發(fā)體驗的小程序框架。

二、優(yōu)化細節(jié)

1、實例生命周期

不同于vue的是我們會在小程序 onReady 后，再去觸發(fā) vue mounted 生命周期

除了 Vue 本身的生命周期外（詳細的 vue 生命周期文檔請看生命周期鉤子），mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。

2、模板語法

幾乎全支持 官方文檔：模板語法，但需要注意的是：

（1）組件：由于要預編譯出 wxml，只能使用單文件組件（.vue 組件）的形式進行支持，不支持：動態(tài)組件，異步組件，自定義 render，inline-template，X-Templates，<script type=\”text/x-template\”> 字符串模版，Slot（scoped 暫時還沒做支持）。

（2）不要在選項屬性或回調上使用箭頭函數(shù)，.eg：

//箭頭函數(shù)是和父級上下文綁定在一起的，this 不會是如你做預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的created: () => console.log(this.a)vm.$watch(\’a\’, newValue => this.myMethod())

（3） 頁面 內可以通過 this.$root.$mp.query （需要在 onLoad 生命周期觸發(fā)之后使用）獲取小程序在 page onLoad 時候傳遞的 options（如：query 參數(shù)等）。組件內通過** this.$root.$mp.appOptions**獲取小程序在 app的 onLaunch/onShow 時候傳遞的 options

（4）mpvue 可以支持小程序的原生組件，建議開發(fā)過程中直接使用 微信小程序：表單組件，.eg：

<picker mode=\”date\” :value=\”date\” start=\”2015-09-01\” end=\”2017-09-01\” @change=\”bindDateChange\”><!–需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange=\”eventName\” 事件，需要寫成 @change=\”eventName\”–> <view class=\”picker\”> 當前選擇: {{date}} </view></picker>

（5）列表渲染，嵌套列表渲染，必須指定不同的索引。示例：

<!– 在這種嵌套循環(huán)的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 –><template> <ul v-for=\”(card, index) in list\”> <li v-for=\”(item, itemIndex) in card\”> {{item.value}} </li> </ul></template>

（6）事件處理器

• 列表中沒有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上將bind改為@ @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區(qū)分到底是什么事件，所以你在監(jiān)聽此類事件的時候同時監(jiān)聽事件名和事件類型既 <map @regionchange=\”functionName\” @end=\”functionName\” @begin=\”functionName\”><map>
• bind 和 catch 事件（.stop 阻止冒泡）同時綁定時，只觸發(fā) bind ,catch 不會被觸發(fā)。
• 小程序里沒有鍵盤事件(鍵盤修飾符)，默認(.prevent)事件，removeEventListener(.once)事件，.self 沒有可以判斷的標識
• .capture （ 1.0.9支持）使用捕獲

// 事件映射表，左側為 WEB 事件，右側為 小程序 對應事件{ click: \’tap\’, touchstart: \’touchstart\’, touchmove: \’touchmove\’, touchcancel: \’touchcancel\’, touchend: \’touchend\’, tap: \’tap\’, longtap: \’longtap\’, input: \’input\’, change: \’change\’,//在 input 和 textarea 中 change 事件會被轉為 blur 事件 submit: \’submit\’, blur: \’blur\’, focus: \’focus\’, reset: \’reset\’, confirm: \’confirm\’, columnchange: \’columnchange\’, linechange: \’linechange\’, error: \’error\’, scrolltoupper: \’scrolltoupper\’, scrolltolower: \’scrolltolower\’, scroll: \’scroll\’}

（7）因為編譯到 wxml，小程序不會生成節(jié)點，暫不支持在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class、 style 等樣式屬性。

<!–不生效，建議寫在內部頂級元素上–><card class=\”class-name\”> </card><card :style=\”{height:10 \’px\’}\”> </card><card @click=\”clickFun\”> </card><card v-show=\”showIf\”> </card>//可用 v-if 代替

（8）不支持在 template 內使用 部分復雜的 Javascript 渲染表達式，methods 中的函數(shù)，過濾器，v-html 指令。我們會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數(shù)據(jù)綁定)，所以無法支持復雜的 JavaScript 表達式。目前可以使用的有 – * % ?: ! == === > < [] .，剩下的還待完善。

<!– 這種就不支持，建議寫 computed –><p>{{ message.split(\’\’).reverse().join(\’\’) }}</p><!– 但寫在 @event 里面的表達式是都支持的，因為這部分的計算放在了 vdom 里面 –><ul> <li v-for=\”item in list\”> <div @click=\”clickHandle(item, index, $event)\”>{{ item.value }}</p> </li></ul>

（9）不支持keep-alive、transition

（10）不支持 官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語法?？梢杂?computed 方法生成 class 或者 style 字符串，從性能考慮，建議不要過度使用

<template> <!– 支持 –> <div class=\”container\” :class=\”computedClassStr\”></div> <div class=\”container\” :class=\”{active: isActive}\”></div> <!– 不支持 –> <div class=\”container\” :class=\”computedClassObject\”></div></template><script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? \’active\’ : \’\’ }, computedClassObject () { return { active: this.isActive } } } }</script>

3、注意事項

（1）開啟單個頁面的“下拉刷新”，你需要在該頁面文件夾中建一個.json文件，在.json文件中配置

{ \”enablePullDownRefresh\”:true}

（2）如果你先全局注冊store，你需要先在src/main里添加在注冊到vue實例中：

Vue.prototype.$store = store

（3）底部導航的圖片你需要放在static文件夾下，否則不會正常顯示

（3）精簡 data 數(shù)據(jù)。冗余數(shù)據(jù)不要掛在 data 里，所有在 data/props/computed 中的數(shù)據(jù)，每次變更都會從微信小程序的 JSCore 進程，通過 setData 序列化成字符串后發(fā)送到 JSRender 進程。所以，如果你的數(shù)據(jù)量巨大的時候，會導致頁面非?？D。

（4） 優(yōu)化長列表性能

• 避免在 v-for 中嵌套子組件，這樣可以優(yōu)化大部分部分 setData 時的冗余數(shù)據(jù)。
• 通過實踐發(fā)現(xiàn) wx:if 和 hidden 的優(yōu)化肉眼不可見，所以或許可以試試直接通過樣式 display 來展示和隱藏。

（5）建議使用 v-model.lazy 綁定方式以優(yōu)化性能，v-model 在老基礎庫下輸入框輸入時可能存在光標重設的問題。

（6）如果你有小程序和H5復用代碼的需要，業(yè)務代碼需要保持對 WEB Vue.js 的兼容性，建議不要在代碼中直接調用小程序API，更好的選擇是通過橋接適配層屏蔽兩端差異。

（7）如何捕獲 app 的 onError。由于 onError 并不是完整意義的生命周期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名為 onError 的回調函數(shù)即可。如下：

export default { // 只有 app 才會有 onLaunch 的生命周期 onLaunch () { // … }, // 捕獲 app error onError (err) { console.log(err) }}

二、使用

通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，即可快速創(chuàng)建和啟動一個帶熱重載、保存時靜態(tài)檢查、內置代碼構建功能的小程序項目：

npm install –global vue-cli//全局安裝vue-cli，如果你已安裝@vue/cli，你需要拉取2.x模板：npm install -g @vue/cli-intvue init mpvue/mpvue-quickstart <project name>//創(chuàng)建一個基于 mpvue-quickstart 模板的新項目cd my-project //進入項目目錄npm install //安裝依賴npm run dev //啟動構建

如果使用vue cli 3先拉取 2.x 模板（詳情參考本人博客：https://my.oschina.net/wangnian/blog/2051369）：

然后：安裝npm包，運行

本文出處：王念博客。? 著作權歸作者所有；如有侵權，請聯(lián)系刪除。