這個(gè)vue3的應(yīng)用框架你學(xué)習(xí)了嗎？
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每早08:30按時(shí)推送技術(shù)干貨/優(yōu)秀開源/技術(shù)思維
?前言：前段時(shí)間開始落地基于vue3開發(fā)的應(yīng)用，于是在社區(qū)留意vue3周邊的一些開源項(xiàng)目。無意間看到微眾銀行
?WeBankFinTech團(tuán)隊(duì)開源的Fes.js解決方案。在這個(gè)方案的設(shè)計(jì)思路中，快速上手、簡(jiǎn)單易用、拓展性高這幾個(gè)特征引起我對(duì)項(xiàng)目的進(jìn)一步探索
1.新項(xiàng)目初期
?當(dāng)我們開始一個(gè)新項(xiàng)目的籌備的時(shí)候（這里特指中后臺(tái)應(yīng)用），項(xiàng)目初始化往往我們可能會(huì)考慮以下幾個(gè)問題
?
如何統(tǒng)一做權(quán)限管理？ 如何統(tǒng)一對(duì)請(qǐng)求庫比如基于 Axios做封裝（取消重復(fù)請(qǐng)求、請(qǐng)求節(jié)流、錯(cuò)誤異常處理等統(tǒng)一處理） 如何作為子應(yīng)用嵌入到微前端體系（假設(shè)基于qiankun） 如何共享響應(yīng)式數(shù)據(jù)？ 配置信息如何管理？
1.1 你可能會(huì)這樣做
如果每次新建一個(gè)項(xiàng)目得時(shí)候，我們都得手動(dòng)去處理以上這些問題，那么將是一個(gè)重復(fù)性操作，而且還要確保團(tuán)隊(duì)一致，那么還得考慮約束能力
?在沒有看到這個(gè)
?Fes.js這個(gè)解決方案之前，對(duì)于上述問題，我的解決方式就是
通過維護(hù)一個(gè)公共的工具庫來封裝,比如axios的二次封裝 開發(fā)一個(gè)簡(jiǎn)易的腳手架，把這些東西集成到一個(gè)模板中，再通過命令行去拉取 直接通過 vue-cli生成模板再進(jìn)行自定義配置修改等等，簡(jiǎ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)建、部署、測(cè)試等，還支持插件和插件集，以滿足功能和垂直域的分層需求。
本質(zhì)上是為了更便捷、更快速地開發(fā)中后臺(tái)應(yīng)用。框架的核心是插件管理，提供的內(nèi)置插件封裝了大量構(gòu)建相關(guān)的邏輯，并且有著豐富的插件生態(tài)，業(yè)務(wù)中需要處理的臟活累活靠插件來解決，而用戶只需要簡(jiǎn)單配置或者按照規(guī)范使用即可
甚至你還可以將插件做聚合成插件集，類似 babel 的 plugin 和 preset，或者 eslint 的 rule 和 config。通過插件和插件集來滿足不同場(chǎng)合的業(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é)省我們手動(dòng)配置路由的時(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í)，才會(huì)根據(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ī)中后臺(tái)應(yīng)用的業(yè)務(wù)場(chǎng)景的問題，包括如下
?
配置化布局：解決布局、菜單 、導(dǎo)航等配置問題，類似low-code機(jī)制 權(quán)限控制：通過內(nèi)置的access插件實(shí)現(xiàn)站點(diǎn)復(fù)雜權(quán)限管理 請(qǐng)求庫封裝：通過內(nèi)置的request插件，內(nèi)置請(qǐng)求防重、請(qǐng)求節(jié)流、錯(cuò)誤處理等功能 微前端集成：通過內(nèi)置qiankun插件，快速集成到微前端中體系
期待更多的插件可以賦能中后臺(tái)應(yīng)用業(yè)務(wù)場(chǎng)景
3.回顧 vue 3
3.1 新特征
vue3.0 相對(duì)于 vue2.0變更幾個(gè)比較大的點(diǎn)包括如下
性能提升：隨著主流瀏覽器對(duì)es6的支持，es module成為可以真正落地的方案，也進(jìn)一步優(yōu)化了vue的性能支持typescript： 通過ts其類型檢查機(jī)制，可避免我們?cè)谥貥?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，將無用模塊都會(huì)最終被搖掉，使得最終打包后的bundle的體積更小更優(yōu)的虛擬Dom方案實(shí)現(xiàn): 添加了標(biāo)記flag，Vue2的Virtual DOM不管變動(dòng)多少整個(gè)模板會(huì)進(jìn)行重新的比對(duì), 而vue3對(duì)動(dòng)態(tài)dom節(jié)點(diǎn)進(jìn)行了標(biāo)記PatchFlag,只需要追蹤帶有PatchFlag的節(jié)點(diǎn)。并且當(dāng)節(jié)點(diǎn)的嵌套層級(jí)多的情況，動(dòng)態(tài)節(jié)點(diǎn)都是直接跟根節(jié)點(diǎn)直接綁定的，也就是說當(dāng)diff算法走到了根dom節(jié)點(diǎn)的時(shí)候，就會(huì)直接定位動(dòng)態(tài)變化的節(jié)點(diǎn)，并不會(huì)去遍歷靜態(tài)dom節(jié)點(diǎn)，以此提升了效率引入Proxy特性：取代了vue2的Object.defineProperty來實(shí)現(xiàn)雙向綁定，因?yàn)槠浔旧淼木窒扌裕荒芙俪謱?duì)象的屬性，如果對(duì)象屬性值是對(duì)象，還需要進(jìn)行深度遍歷，才能做到劫持，并不能真正意義上的完整劫持整個(gè)對(duì)象，而proxy可以完整劫持整個(gè)對(duì)象
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，可以靈活地組合組件邏輯
通過上圖的對(duì)比，我們可以看出Composition API 與 Options API在構(gòu)建組件的差別，很明顯基于Composition API構(gòu)建會(huì)更加清晰明了。我們會(huì)發(fā)現(xiàn)vue3幾個(gè)不同的點(diǎn)：
vue3提供了兩種 數(shù)據(jù)響應(yīng)式監(jiān)聽APIref和reactive，這兩者的區(qū)別在 reactive主要用于定義復(fù)雜的數(shù)據(jù)類型比如對(duì)象，而ref則用于定義基本類型比如字符串vue3 提供了 setup(props, context)方法，這是使用Composition API 的前提入口，相當(dāng)于vue2.x在 生命周期beforeCreate 之后 created 之前執(zhí)行，方法中的props參數(shù)是用來獲取在組件中定義的props的，需要注意的是props是響應(yīng)式的, 并不能使用es6解構(gòu)（它會(huì)消除prop的響應(yīng)性），如果需要監(jiān)聽響應(yīng)還需要使用wacth。而context參數(shù)來用來獲取attribute，獲取插槽，或者發(fā)送事件,比如context.emit，因?yàn)樵趕etup里面沒有this上下文，只能使用context來獲取上下文
關(guān)注公眾號(hào)【趣談前端】，不定期分享 前端工程化 / 可視化 / 低代碼 等技術(shù)文章。
Dooring可視化搭建平臺(tái)數(shù)據(jù)源設(shè)計(jì)剖析
點(diǎn)個(gè)在看你最好看
