這個(gè)vue3的應(yīng)用框架你學(xué)習(xí)了嗎？

?

前言：前段時(shí)間開始落地基于vue3開發(fā)的應(yīng)用，于是在社區(qū)留意vue3周邊的一些開源項(xiàng)目。無意間看到微眾銀行WeBankFinTech團(tuán)隊(duì)開源的Fes.js解決方案。在這個(gè)方案的設(shè)計(jì)思路中，快速上手、簡單易用、拓展性高這幾個(gè)特征引起我對項(xiàng)目的進(jìn)一步探索

?

1.新項(xiàng)目初期

?

當(dāng)我們開始一個(gè)新項(xiàng)目的籌備的時(shí)候（這里特指中后臺應(yīng)用），項(xiàng)目初始化往往我們可能會考慮以下幾個(gè)問題

?

• 如何統(tǒng)一做權(quán)限管理？
• 如何統(tǒng)一對請求庫比如基于 Axios做封裝（取消重復(fù)請求、請求節(jié)流、錯(cuò)誤異常處理等統(tǒng)一處理）
• 如何作為子應(yīng)用嵌入到微前端體系（假設(shè)基于qiankun）
• 如何共享響應(yīng)式數(shù)據(jù)？
• 配置信息如何管理？

1.1 你可能會這樣做

如果每次新建一個(gè)項(xiàng)目得時(shí)候，我們都得手動去處理以上這些問題，那么將是一個(gè)重復(fù)性操作，而且還要確保團(tuán)隊(duì)一致，那么還得考慮約束能力

?

在沒有看到這個(gè)Fes.js這個(gè)解決方案之前，對于上述問題，我的解決方式就是

?

• 通過維護(hù)一個(gè)公共的工具庫來封裝,比如axios的二次封裝
• 開發(fā)一個(gè)簡易的腳手架，把這些東西集成到一個(gè)模板中，再通過命令行去拉取
• 直接通過vue-cli生成模板再進(jìn)行自定義配置修改等等，簡單就是用文檔，工具，腳手架來賦能

但其實(shí)有沒有更好的解決方案？

圖片引自文章《螞蟻前端研發(fā)最佳實(shí)踐》

1.2 其他解決方式 - 框架（插件化）

學(xué)習(xí)react的童鞋都知道，在react社區(qū)有個(gè)插件化的前端應(yīng)用框架UmiJS，而vue的世界中并不存在，而接下來我們要分享的Fes.js，就是vue中的 UmiJS， Fes.js 很多功能是借鑒 ?UmiJS 做的, ?UmiJS 內(nèi)置了路由、構(gòu)建、部署、測試等，還支持插件和插件集，以滿足功能和垂直域的分層需求。

本質(zhì)上是為了更便捷、更快速地開發(fā)中后臺應(yīng)用。框架的核心是插件管理，提供的內(nèi)置插件封裝了大量構(gòu)建相關(guān)的邏輯，并且有著豐富的插件生態(tài)，業(yè)務(wù)中需要處理的臟活累活靠插件來解決，而用戶只需要簡單配置或者按照規(guī)范使用即可

甚至你還可以將插件做聚合成插件集，類似 babel 的 plugin 和 preset，或者 eslint 的 rule 和 config。通過插件和插件集來滿足不同場合的業(yè)務(wù)

通過插件擴(kuò)展 import from UmiJS的能力，比如類似下圖，是不是很像vue 3的Composition API設(shè)計(jì)

拓展閱讀：

• UmiJS 插件體系的一些初步理解

2. Fes.js

?

官方介紹：Fes.js 是一個(gè)好用的前端應(yīng)用解決方案。Fes.js 2.0 以Vue 3.0和路由為基礎(chǔ)，同時(shí)支持配置式路由和約定式路由，并以此進(jìn)行功能擴(kuò)展。匹配了覆蓋編譯時(shí)和運(yùn)行時(shí)生命周期完善的插件體系，支持各種功能擴(kuò)展和業(yè)務(wù)需求。

?

2.1 支持約定式路由

?

約定式路由是個(gè)啥？約定式路由也叫文件路由，就是不需要手寫配置，文件系統(tǒng)即路由，現(xiàn)在越來越多框架支持約定式路由，包括上文提到的 UmiJS，還有SSR的nuxt等等，節(jié)省我們手動配置路由的時(shí)間. 關(guān)于fes更多的路由配置看路由文檔

?

2.2 插件化支持

本質(zhì)上一個(gè)插件是就是一個(gè)npm包， 通過插件擴(kuò)展Fes.js的功能，目前 Fes.js已經(jīng)有多個(gè)插件開源。而且插件可以管理項(xiàng)目的編譯時(shí)和運(yùn)行時(shí) ?插件文檔

插件源碼地址 鏈接。fesjs也支持開發(fā)者自定義插件，詳情看插件化開發(fā)文檔

?

彬彬同學(xué)：那什么叫支持編譯時(shí)和運(yùn)行時(shí)？

?

可以這樣理解: 如果是編譯時(shí)的配置，就是打包的時(shí)候，就根據(jù)配置完成相應(yīng)的代碼構(gòu)建，而運(yùn)行時(shí)的配置，則是代碼在瀏覽器執(zhí)行時(shí)，才會根據(jù)讀取的配置去做相應(yīng)處理，如果感興趣，可以深入理解下fesjs的插件源碼，了解如何根據(jù)編譯時(shí)和運(yùn)行時(shí)做處理 fes-plugin-access 源碼鏈接

2.3 ?Fes.js 如何使用

?

Fes.js 提供了命令行工具 create-fes-app, 全局安裝后直接通過該命令創(chuàng)建項(xiàng)目模板，項(xiàng)目結(jié)構(gòu)如下所示

?

然后運(yùn)行 npm run dev 就可以開啟你的fes之路, 如下圖所示

2.4 為啥選擇 Fes.js

?

像vue-cli 只能解決我們項(xiàng)目中開發(fā)，構(gòu)建，打包等基本問題，而 Fes.js可以直接解決大部分常規(guī)中后臺應(yīng)用的業(yè)務(wù)場景的問題，包括如下

?

• 配置化布局：解決布局、菜單 、導(dǎo)航等配置問題，類似low-code機(jī)制
• 權(quán)限控制：通過內(nèi)置的access插件實(shí)現(xiàn)站點(diǎn)復(fù)雜權(quán)限管理
• 請求庫封裝：通過內(nèi)置的request插件，內(nèi)置請求防重、請求節(jié)流、錯(cuò)誤處理等功能
• 微前端集成：通過內(nèi)置qiankun插件，快速集成到微前端中體系

期待更多的插件可以賦能中后臺應(yīng)用業(yè)務(wù)場景

3.回顧 vue 3

3.1 新特征

vue3.0 相對于 vue2.0變更幾個(gè)比較大的點(diǎn)包括如下

• 性能提升：隨著主流瀏覽器對es6的支持，es module成為可以真正落地的方案，也進(jìn)一步優(yōu)化了vue的性能

• 支持typescript：?通過ts其類型檢查機(jī)制，可避免我們在重構(gòu)過程中引入意外的錯(cuò)誤

• 框架體積變小：框架體積優(yōu)化后，一方面是因?yàn)橐?code style="overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;">Composition API的設(shè)計(jì)，同時(shí)支持tree-shaking樹搖，按需引入模塊API，將無用模塊都會最終被搖掉，使得最終打包后的bundle的體積更小

• 更優(yōu)的虛擬Dom方案實(shí)現(xiàn) : 添加了標(biāo)記flag，Vue2的Virtual DOM不管變動多少整個(gè)模板會進(jìn)行重新的比對, 而vue3對動態(tài)dom節(jié)點(diǎn)進(jìn)行了標(biāo)記PatchFlag ,只需要追蹤帶有PatchFlag的節(jié)點(diǎn)。并且當(dāng)節(jié)點(diǎn)的嵌套層級多的情況，動態(tài)節(jié)點(diǎn)都是直接跟根節(jié)點(diǎn)直接綁定的，也就是說當(dāng)diff算法走到了根dom節(jié)點(diǎn)的時(shí)候，就會直接定位動態(tài)變化的節(jié)點(diǎn)，并不會去遍歷靜態(tài)dom節(jié)點(diǎn)，以此提升了效率

• 引入Proxy特性：取代了vue2的Object.defineProperty來實(shí)現(xiàn)雙向綁定，因?yàn)槠浔旧淼木窒扌裕荒芙俪謱ο蟮膶傩裕绻麑ο髮傩灾凳菍ο螅€需要進(jìn)行深度遍歷，才能做到劫持，并不能真正意義上的完整劫持整個(gè)對象，而proxy可以完整劫持整個(gè)對象

3.2 關(guān)于 Composition API

?

vue3 取代了原本vue2通過Options API來構(gòu)建組件設(shè)計(jì)（強(qiáng)制我們進(jìn)行代碼分層），而采用了類似React Hooks的設(shè)計(jì)，通過可組組合式的、低侵入式的、函數(shù)式的 API，使得我們構(gòu)建組件更加靈活。官方定義：一組基于功能的附加API，可以靈活地組合組件邏輯

?

通過上圖的對比，我們可以看出Composition API 與 Options API在構(gòu)建組件的差別，很明顯基于Composition API構(gòu)建會更加清晰明了。我們會發(fā)現(xiàn)vue3幾個(gè)不同的點(diǎn)：

• vue3提供了兩種數(shù)據(jù)響應(yīng)式監(jiān)聽APIref和reactive，這兩者的區(qū)別在 reactive主要用于定義復(fù)雜的數(shù)據(jù)類型比如對象，而ref則用于定義基本類型比如字符串
• vue3 提供了setup(props, context)方法，這是使用Composition API 的前提入口，相當(dāng)于 vue2.x 在 生命周期beforeCreate 之后 created 之前執(zhí)行，方法中的props參數(shù)是用來獲取在組件中定義的props的，需要注意的是props是響應(yīng)式的, 并不能使用es6解構(gòu)（它會消除prop的響應(yīng)性），如果需要監(jiān)聽響應(yīng)還需要使用wacth。而context參數(shù)來用來獲取attribute，獲取插槽，或者發(fā)送事件,比如 context.emit，因?yàn)樵趕etup里面沒有this上下文，只能使用context來獲取山下文

關(guān)于vue3的更多實(shí)踐后期會繼續(xù)更新，本期主要是簡單回顧