全新重構，uni-app實現微信端性能翻倍

屢次論證、數月研發，咱們重寫部分Vue底層、重構uni-app框架，實現了微信端性能翻倍及更多Vue語法支持。

背景

uni-app在初期借鑑了mpvue，實現了微信小程序端的快速兼容，感謝美團點評團隊對於開源社區的貢獻！

隨着使用uni-app的開發者越來越多，業務複雜度不斷增長，很多開發者抱怨uni-app支持的vue語法少，某些場景性能有問題（特別是頁面存在複雜組件的狀況），這些問題實際上是由mpvue的實現機制致使的，咱們以複雜組件的性能問題爲例簡要說明。

mpvue/wepy 誕生之初，微信小程序尚不支持自定義組件，沒法進行組件化開發；mpvue/wepy 爲解決這個問題，創造性的將用戶編寫的Vue組件，編譯爲WXML中的模板（template)，這樣變相實現了組件化開發能力，提升代碼複用性，這在當時的技術條件下是很棒的技術方案。但如此方案，也致使Vue組件中的數據會被編譯爲Page中的數據，對組件進行數據更新也會基於路徑映射調用Page.setData。特別是組件較多、數據量交大的頁面中，每一個組件的局部更新會引起頁面級別的全局更新，產生極大的性能開銷。

微信後來推出的自定義組件，其實支持組件級別的局部更新，經驗證，咱們發現組件級別的數據更新，相比頁面全局更新，有大幅性能提高。

另外，mpvue在Vue層進行的vnode對比及數據diff計算不完全，也會消耗部分性能。

基於這些緣由，咱們開始了微信端的框架重寫工做。

新版特性

性能翻倍

新版 uni-app 調整重寫了部分Vue.js底層實現，主要包括：

• 基於小程序自定義組件實現 Vue.js 的組件化開發
• Vue層取消vnode對比
• 更完全的diff計算，setData()通信數據量更少

新框架重寫後，咱們構造了以下測試模型：

• 構造一個列表界面，每一個列表項爲一個自定義組件
• 上拉加載觸發數據更新，每次從本地讀取靜態數據，屏蔽網絡差別
• 觸發數據更新計時開始，頁面渲染完畢計時結束，求其時間差做爲對比指標（耗時，單位爲毫秒）

而後分別使用新、老框架，在同一臺手機（vivo nex）上進行屢次測試，求其平均值，獲取以下結果：

組件數量	老框架(mpvue)	新框架
200	204ms	129ms
400	280ms	139ms
800	341ms	180ms
1000	653ms	196ms

從測試數據來看，新框架在複雜頁面下，性能有翻倍提高！特別是數據越多、組件越複雜的頁面，性能提高越大！

更多 Vue 語法支持

咱們同時加強了uni-app編譯器，支持了更多 Vue 語法，詳細以下：

• 支持過濾器 filter
• 支持比較複雜的 JavaScript 渲染表達式
• 支持在 template 內使用 methods 中的函數
• 支持 v-html （同 rich-text 的解析）
• 組件支持原生事件綁定，如：@tap.native

體驗方式

目前新框架在微信端已完成開發，其餘小程序和App的編譯器仍爲舊版。咱們放出羣測版，邀請開發者在微信端搶鮮體驗。

開發者可按照以下方式建立vue-cli並建立uni-app項目，編譯發行到微信小程序：

# npm script
# 全局安裝vue-cli
$ npm install -g @vue/cli
# 建立uni-app項目，會提示選擇項目模板，初次接觸建議選擇 hello uni-app 模板
$ vue create -p dcloudio/uni-preset-vue my-project
# 進入項目目錄
$ cd my-project
# dev 模式，編譯預覽
$ npm run dev:mp-weixin
# build 模式，發行打包
$ npm run build:mp-weixin

新老版本切換

爲了避免影響老項目，uni-app羣測版目前同時內置新、老兩個框架，且默認使用老框架，開發者可經過配置 manifest.json -> mp-weixin -> usingComponents節點啓用新編譯框架，以下：

// manifest.json
{
    // ...
    /* 小程序特有相關 */
    "mp-weixin": {
        "usingComponents":true //啓用新框架編譯，默認爲false
    }
}

若是你使用了新增的vue語法，請注意只有h5和微信支持這些新語法，編譯到其餘平臺時，要用條件編譯處理。

Tips：

• 爲保證自定義組件兼容性，運行到微信開發者工具時，建議將微信基礎庫設置爲最新版本。
• 體驗新框架時，有任何問題或者建議，歡迎到github提交 issue

現狀與將來

春節事後，uni-app1.6版本發佈，新增字節跳動小程序平臺支持；至此，實現一套代碼、7端發佈！7端分別包括：App（iOS/Android）、小程序（微信/支付寶/百度/字節跳動）、H5平臺，見下圖：

大量開發者熱情涌入 uni-app 社區，目前已有幾十個uni-app交流羣，下圖爲一個500人的QQ交流羣，建立2天即滿羣，開發者的熱情可見一斑。

目前，天天新建立的uni-app項目（包括測試項目）達數千個，案例早已過萬，部分案例見https://uniapp.dcloud.io/case。與Taro等框架清一色微信小程序案例相比，uni-app的跨端案例要豐富不少。

在小程序跨端框架中，uni-app也許是使用人數最多、跨端案例最豐富的前端框架。

近期，爲活躍Vue多端開發生態，由uni-app與mpvue團隊聯合舉辦的插件開發大賽正式開始了！歡迎各位開發者踊躍參與，製造輪子、造福社區的同時，順手再拿個獎品（iphone Xs Max、4K顯示器等獎品多多），一舉多得^_^，點擊瞭解詳情。

接下來，uni-app團隊將繼續全力奔跑，在以下方面快速完善：

• uni-app新框架兼容到其它平臺
• uni-ui 跨端UI庫精緻化
• App端引入更多原生渲染，提高系能體驗
• 周邊生態進一步完善，好比行業模板、跨端統計等

「爲開發者而生」，不是口號，而是定位。

uni-app團隊將一如既往的爲開發者解決開發痛點、提高開發效率！