像寫 Vue3 一樣寫小程序

Vue 3 帶來了許多令人興奮的新特性，這其中最令人期待的莫過于 Composition API，它帶來了更靈活的代碼組織方式，更好的 TS 支持，以及更強(qiáng)大的邏輯復(fù)用能力。

如今 Vue 3 已經(jīng)發(fā)布半年有余，各項(xiàng)周邊配套也已基本完善，可以說它已經(jīng)準(zhǔn)備好被用于生產(chǎn)了。你或許早已摩拳擦掌躍躍欲試，但作為國內(nèi)開發(fā)者你卻可能面臨著一個(gè)很尷尬的處境，那就是你的主要工作也許是寫小程序，這一切令人激動(dòng)的消息好像與你并沒有什么關(guān)系。但是如果你能用 Vue 3 的 Composition API 寫小程序呢？

介紹

向大家隆重介紹 Vue Mini，它是一個(gè)基于 Vue 3 的小程序庫，它能讓你用 Composition API 寫小程序。

Vue Mini 底層直接且僅依賴 Vue 3 的響應(yīng)式核心 @vue/reactivity，它完整繼承了 Vue 3 的響應(yīng)式數(shù)據(jù)，并且設(shè)計(jì)了與 Composition API 一模一樣的 API，當(dāng)然也擁有一模一樣的能力。用 Vue Mini 寫小程序就像在寫 Vue 3 一樣。

動(dòng)機(jī)

小程序本就自帶一個(gè)框架，為什么還要大費(fèi)周章的移植別的框架呢？

這是因?yàn)樾〕绦蜃陨淼目蚣茉趲啄昵盎蛟S還差強(qiáng)人意，但如今卻很難讓人滿意了。現(xiàn)在 TS 越來越受歡迎，而小程序自身對 TS 的支持卻很羸弱。并且當(dāng)小程序組件變大時(shí)，你也不能按邏輯關(guān)注點(diǎn)來組織代碼，這可能會(huì)導(dǎo)致組件難以閱讀和理解。最后小程序提供的邏輯復(fù)用方案 Behavior 其實(shí)就是 Mixin，存在著與 Mixin 相同的限制，例如容易發(fā)生沖突，不能接收參數(shù)等。

這些問題恰巧也是 Vue 3 添加 Composition API 所解決的問題。所以 Vue Mini 將 Composition API 移植到小程序，從而解決了這些問題。它提供了非常好的 TS 支持，并且有很好的類型推導(dǎo)，很多時(shí)候你并不需要手寫類型注解。你可以按邏輯關(guān)注點(diǎn)來組織代碼，讓復(fù)雜的組件更容易閱讀和理解。你也能將任意邏輯提取為一個(gè)組合函數(shù)，你可以在任何組件中調(diào)用組合函數(shù)，你也可以向組合函數(shù)傳遞任何參數(shù)來改變它的邏輯，這大大提高了抽象邏輯的靈活性。

Dogfooding

Vue Mini 其實(shí)已經(jīng)在我們公司內(nèi)部孵化一年多的時(shí)間了，它已經(jīng)先后被用于創(chuàng)新項(xiàng)目和正式的生產(chǎn)項(xiàng)目。之所以最近才開始宣傳是因?yàn)樵诮?jīng)過真實(shí)生產(chǎn)項(xiàng)目驗(yàn)證之前，我并不能確定它是可行的，所以過去一年我都在 Dogfooding（使用自己的產(chǎn)品）。

非常幸運(yùn)，在團(tuán)隊(duì)小伙伴的信任和支持下，我們用 Vue Mini 寫的第一個(gè)生產(chǎn)小程序最近已經(jīng)成功上線了，最新上線的版本一共包含 58 個(gè)頁面，幾乎全都是用 Vue Mini 寫的。我現(xiàn)在十分確定 Vue Mini 是可行的，在經(jīng)過生產(chǎn)項(xiàng)目打磨后，它的質(zhì)量已經(jīng)比較可靠了，API 也比較穩(wěn)定了。我認(rèn)為現(xiàn)在是時(shí)候讓更多的人知道它的存在了，它或許也能解決你的一些問題。

如果你對 Vue Mini 感興趣，想將其引入到你個(gè)人或工作的小程序中，一個(gè)保險(xiǎn)也更具說服力的做法是先在小程序的部分頁面或組件中小規(guī)模使用，等你或你的小伙伴逐漸信任它之后，再慢慢擴(kuò)大使用范圍。

當(dāng)然 Vue Mini 還沒有經(jīng)歷過大規(guī)模的生產(chǎn)項(xiàng)目的考驗(yàn)，你在使用過程中可能仍然會(huì)碰到 Bug 或不完善的地方，這時(shí)候歡迎提交 Issue。

比較

這里對比一下 Vue Mini 和其他一些小程序框架的區(qū)別。

原生語法

小程序原生語法是開發(fā)者所能接觸到的最底層，這也是寫小程序的唯一方法，任何其他方案最終都要通過原生語法才能工作。

幾年前小程序原生語法可能還不算太糟糕，但如今 TS 越來越受歡迎，而原生語法對 TS 的支持卻很羸弱。并且 React Hooks 橫空出世，徹底改變了 UI 邏輯的編寫方式，Vue 3 也根據(jù)自己的響應(yīng)式數(shù)據(jù)提出了 Composition API，有著與 React Hooks 相同的能力。

在這種背景下原生語法已經(jīng)很難讓人滿意，Vue Mini 通過將 Vue 3 的 Composition API 引入小程序，從而解決了這些問題。Vue Mini 與原生語法也并不是二選一的關(guān)系，它們可以很好的協(xié)同工作。

Taro 2 / Rax 編譯時(shí)

Taro 2 是個(gè)很有想象力的方案（Rax 編譯時(shí)與 Taro 2 基本類似），你可以像寫 React 一樣寫小程序，它通過編譯時(shí)的靜態(tài)分析將你的類 React 組件還原成原生語法。可是這其中有個(gè)致命的問題，React Render Function / JSX 是極其動(dòng)態(tài)的，而原生語法的 Template 是比較靜態(tài)的。都知道把靜態(tài)模版編譯為動(dòng)態(tài)渲染函數(shù)不難，反過來卻難如登天。也就是這個(gè)根本原因?qū)е?Taro 2 有很多難以解決的問題，Taro 團(tuán)隊(duì)可能也意識到這條路是個(gè)死胡同，所以 Taro 3 拋棄了編譯時(shí)方案。而 Vue Mini 目前只是一個(gè)輕量的純運(yùn)行時(shí)庫，它并不依賴任何編譯時(shí)手段。

Taro 3 / Remax / kbone / Rax 運(yùn)行時(shí)

Taro 3 / Remax / kbone / Rax 運(yùn)行時(shí)，這四個(gè)方案的實(shí)現(xiàn)細(xì)節(jié)略有不同，但可以大致歸為同一類。

Taro 3 / kbone / Rax 運(yùn)行時(shí)，這三個(gè)方案是通過模擬實(shí)現(xiàn) DOM API 來讓現(xiàn)有的 Web 框架可以跑在小程序上，最終通過模擬的 DOM API 生成 VDOM，而 Remax 是實(shí)現(xiàn)了一個(gè)自定義的 react-reconciler 直接承接 React 生成的 VDOM。最終它們都是將 VDOM 作為小程序組件的 data 發(fā)送給模版，然后通過模版語法在運(yùn)行時(shí)暴力遞歸 VDOM 生成最終的 UI 樹。

可以了解到這類方案是重運(yùn)行時(shí)的，很暴力，但有效。可是這類方案也是帶著原罪出生的，主要問題有兩個(gè)：一個(gè)是這類方案都帶有一個(gè)很大的運(yùn)行時(shí)，一個(gè) Hello World 小程序，Taro 3 的大小是 243KB，Remax 更是達(dá)到了 305KB，而作為對比 Vue Mini 只有 19KB，雖然這樣的對比并不嚴(yán)謹(jǐn)，但大致也可以說明問題。另一個(gè)問題是這類方案有很大的性能開銷，據(jù) Rax 計(jì)算它們與原生小程序存在約 40% 的性能差距，而 Vue Mini 完全依賴小程序自己的運(yùn)行時(shí)，只是在響應(yīng)式數(shù)據(jù)變化時(shí)點(diǎn)對點(diǎn)的更新小程序組件的 data，因此 Vue Mini 有著與原生小程序十分接近的性能表現(xiàn)。

uni-app / mpvue / Megalo

uni-app / mpvue / Megalo 這三個(gè)方案也可以大致歸為同一類，它們與 Vue Mini 一樣都是基于 Vue 的。

但是 Vue Mini 與它們的差別也很明顯，它們都是基于 Vue 2 的，而 Vue Mini 是基于 Vue 3 的，Vue 3 不論是響應(yīng)式數(shù)據(jù)還是 Composition API 都比 Vue 2 要更加靈活、強(qiáng)大。由于 Vue 2 的限制，它們基本都維護(hù)了一份 Vue 2 的 Fork，Vue 3 將自身拆成了幾個(gè)相對獨(dú)立的部分，Vue Mini 直接且僅依賴 Vue 3 的響應(yīng)式核心 @vue/reactivity，這避免了一些不必要的性能開銷，也保證了運(yùn)行時(shí)的小巧。

另外在技術(shù)偏向上，Vue Mini 與它們的選擇也不同，它們是盡量靠近 Vue，努力將 Vue 渲染到小程序，而 Vue Mini 是在原生小程序基礎(chǔ)上借助 Vue 做增強(qiáng)，更靠近原生小程序。這有助于減少各種各樣的坑，并且能更好更無痛的使用小程序本身的各種 API。

嘗試一下

使用以下命令，你可以快速搭起一個(gè)基于 Vue Mini 的小程序：

npm?install?-g?sao@beta
#?Then
sao?vue-mini/template?new-miniprogram

最后歡迎分享、轉(zhuǎn)載本文，讓更多的人知道 Vue Mini。