相關(guān)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)教程
多次論證、數(shù)月研發(fā)，我們重寫(xiě)部分vue底層、重構(gòu)uni-app框架，實(shí)現(xiàn)了微信端性能翻倍及更多vue語(yǔ)法支持。
背景
uni-app在初期借鑒了mpvue，實(shí)現(xiàn)了微信小程序端的快速兼容，感謝美團(tuán)點(diǎn)評(píng)團(tuán)隊(duì)對(duì)于開(kāi)源社區(qū)的貢獻(xiàn)！
隨著使用uni-app的開(kāi)發(fā)者愈來(lái)愈多，業(yè)務(wù)復(fù)雜度不斷增加，不少開(kāi)發(fā)者抱怨uni-app支持的vue語(yǔ)法少，某些場(chǎng)景性能有問(wèn)題（特別是頁(yè)面存在復(fù)雜組件的情況），這些問(wèn)題其實(shí)是由mpvue的實(shí)現(xiàn)機(jī)制導(dǎo)致的，我們以復(fù)雜組件的性能問(wèn)題為例簡(jiǎn)要說(shuō)明。
mpvue/wepy 等框架誕生之初，微信小程序尚不支持自定義組件，無(wú)法進(jìn)行組件化開(kāi)發(fā)；mpvue/wepy 為解決這個(gè)問(wèn)題，創(chuàng)造性的將用戶(hù)編寫(xiě)的vue組件，編譯為wxml中的模板（template)，這樣變相實(shí)現(xiàn)了組件化開(kāi)發(fā)能力，提高代碼復(fù)用性，這在當(dāng)時(shí)的技術(shù)條件下是很棒的技術(shù)方案。但如此方案，也導(dǎo)致vue組件中的數(shù)據(jù)會(huì)被編譯為page中的數(shù)據(jù)，對(duì)組件進(jìn)行數(shù)據(jù)更新也會(huì)基于路徑映射調(diào)用page.setdata。特別是組件較多、數(shù)據(jù)量交大的頁(yè)面中，每個(gè)組件的局部更新會(huì)引發(fā)頁(yè)面級(jí)別的全局更新，產(chǎn)生極大的性能開(kāi)銷(xiāo)。
微信后來(lái)推出的自定義組件，其實(shí)支持組件級(jí)別的局部更新，經(jīng)驗(yàn)證，我們發(fā)現(xiàn)組件級(jí)別的數(shù)據(jù)更新，相比頁(yè)面全局更新，有大幅性能提升。
另外，mpvue在vue層進(jìn)行的vnode對(duì)比及數(shù)據(jù)diff計(jì)算不徹底，也會(huì)消耗部分性能。
基于這些原因，我們開(kāi)始了微信端的框架重寫(xiě)工作。
新版特性性能翻倍
新版 uni-app 調(diào)整重寫(xiě)了部分vue.js底層實(shí)現(xiàn)，主要包括：
基于小程序自定義組件實(shí)現(xiàn) vue.js 的組件化開(kāi)發(fā)vue層取消vnode對(duì)比更徹底的diff計(jì)算，setdata()通訊數(shù)據(jù)量更少
新框架重寫(xiě)后，我們構(gòu)造了如下測(cè)試模型：
構(gòu)造一個(gè)列表界面，每個(gè)列表項(xiàng)為一個(gè)自定義組件上拉加載觸發(fā)數(shù)據(jù)更新，每次從本地讀取靜態(tài)數(shù)據(jù)，屏蔽網(wǎng)絡(luò)差異觸發(fā)數(shù)據(jù)更新計(jì)時(shí)開(kāi)始，頁(yè)面渲染完畢計(jì)時(shí)結(jié)束，求其時(shí)間差作為對(duì)比指標(biāo)（耗時(shí)，單位為毫秒）
然后分別使用新、老框架，在同一臺(tái)手機(jī)（vivo nex）上進(jìn)行多次測(cè)試，求其平均值，獲取如下結(jié)果：
組件數(shù)量老框架(mpvue)新框架200204ms129ms400280ms139ms800341ms180ms1000653ms196ms
從測(cè)試數(shù)據(jù)來(lái)看，新框架在復(fù)雜頁(yè)面下，性能有翻倍提升！特別是數(shù)據(jù)越多、組件越復(fù)雜的頁(yè)面，性能提升越大！
tips：我們還針對(duì)目前主流的幾個(gè)跨端框架（比如：taro、wepy、chameleon等），全部做了一遍性能測(cè)試，uni-app的跑分結(jié)果同樣搶眼，近期會(huì)將測(cè)試代碼、測(cè)試結(jié)果公開(kāi)，接受大家評(píng)判，敬請(qǐng)期待。
更多 vue 語(yǔ)法支持
我們同時(shí)增強(qiáng)了uni-app編譯器，支持了更多 vue 語(yǔ)法，詳細(xì)如下：
支持過(guò)濾器 filter支持比較復(fù)雜的 javascript 渲染表達(dá)式支持在 template 內(nèi)使用 methods 中的函數(shù)支持 v-html （同 rich-text 的解析）組件支持原生事件綁定，如：@tap.native體驗(yàn)方式
目前新框架在微信端已完成開(kāi)發(fā)，其他小程序和app的編譯器仍為舊版。我們放出群測(cè)版，邀請(qǐng)開(kāi)發(fā)者在微信端搶鮮體驗(yàn)。
開(kāi)發(fā)者按照如下方式創(chuàng)建vue-cli并創(chuàng)建uni-app項(xiàng)目，編譯發(fā)行到微信小程序：
# npm script# 全局安裝vue-cli$ npm install -g @vue/cli# 創(chuàng)建uni-app項(xiàng)目，會(huì)提示選擇項(xiàng)目模板，初次接觸建議選擇 hello uni-app 模板$ vue create -p dcloudio/uni-preset-vue my-project# 進(jìn)入項(xiàng)目目錄$ cd my-project# dev 模式，編譯預(yù)覽$ npm run dev:mp-weixin# build 模式，發(fā)行打包$ npm run build:mp-weixin復(fù)制代碼新老版本切換
為了不影響老項(xiàng)目，uni-app群測(cè)版目前同時(shí)內(nèi)置新、老兩個(gè)框架，且默認(rèn)使用老框架，開(kāi)發(fā)者可通過(guò)配置 manifest.json -> mp-weixin -> usingcomponents節(jié)點(diǎn)啟用新編譯框架，如下：
// manifest.json{ // ... /* 小程序特有相關(guān) */ "mp-weixin": { "usingcomponents":true //啟用新框架編譯，默認(rèn)為false }}復(fù)制代碼如果你使用了新增的vue語(yǔ)法，請(qǐng)注意只有h5和微信支持這些新語(yǔ)法，編譯到其他平臺(tái)時(shí)，要用條件編譯處理。
tips：
為保證自定義組件兼容性，運(yùn)行到微信開(kāi)發(fā)者工具時(shí)，建議將微信基礎(chǔ)庫(kù)設(shè)置為最新版本。體驗(yàn)新框架時(shí)，有任何問(wèn)題或者建議，歡迎到github提交 issue現(xiàn)狀與未來(lái)
春節(jié)過(guò)后，uni-app1.6版本發(fā)布，新增字節(jié)跳動(dòng)小程序平臺(tái)支持；至此，實(shí)現(xiàn)一套代碼、7端發(fā)布！7端分別包括：app（ios/android）、小程序（微信/支付寶/百度/字節(jié)跳動(dòng)）、h5平臺(tái)，見(jiàn)下圖：
大量開(kāi)發(fā)者熱情涌入 uni-app 社區(qū)，目前已有幾十個(gè)uni-app交流群，下圖為一個(gè)500人的qq交流群，創(chuàng)建2天即滿(mǎn)群，開(kāi)發(fā)者的熱情可見(jiàn)一斑。
目前，每天新創(chuàng)建的uni-app項(xiàng)目（包括測(cè)試項(xiàng)目）達(dá)數(shù)千個(gè)，案例過(guò)萬(wàn)，部分案例見(jiàn)uniapp.dcloud.io/case。與taro等框架清一色微信小程序案例相比，uni-app的跨端案例要豐富很多。
在小程序跨端框架中，uni-app也許是使用人數(shù)最多、跨端案例最豐富的前端框架。
近期，為活躍vue多端開(kāi)發(fā)生態(tài)，由uni-app與mpvue團(tuán)隊(duì)聯(lián)合舉辦的插件開(kāi)發(fā)大賽正式開(kāi)始了！歡迎各位開(kāi)發(fā)者踴躍參與，制造輪子、造福社區(qū)的同時(shí)，順手再拿個(gè)獎(jiǎng)品（iphone xs max、4k顯示器等獎(jiǎng)品多多），一舉多得^_^，點(diǎn)擊了解詳情。
接下來(lái)，uni-app團(tuán)隊(duì)將繼續(xù)全力奔跑，在如下方面快速完善：
uni-app新框架兼容到其它平臺(tái)uni-ui 跨端ui庫(kù)精致化app端引入更多原生渲染，提升系能體驗(yàn)周邊生態(tài)進(jìn)一步完善，比如行業(yè)模板、跨端統(tǒng)計(jì)等
“為開(kāi)發(fā)者而生”，不是口號(hào)，而是定位。
uni-app團(tuán)隊(duì)將一如既往的為開(kāi)發(fā)者解決開(kāi)發(fā)痛點(diǎn)、提升開(kāi)發(fā)效率！
了解更多其他精品文章，敬請(qǐng)關(guān)注uni-app欄目~