這個vue3的應用框架你學習了嗎？

前言：前段時間開始落地基於vue3開發的應用，因而在社區留意vue3周邊的一些開源項目。無心間看到微衆銀行 WeBankFinTech團隊開源的 Fes.js解決方案。在這個方案的設計思路中，快速上手、簡單易用、拓展性高這幾個特徵引發我對項目的進一步探索

1.新項目初期

當咱們開始一個新項目的籌備的時候（這裏特指中後臺應用），項目初始化每每咱們可能會考慮如下幾個問題

• 如何統一作權限管理？
• 如何統一對請求庫好比基於 Axios作封裝（取消重複請求、請求節流、錯誤異常處理等統一處理）
• 如何做爲子應用嵌入到微前端體系（假設基於qiankun）
• 如何共享響應式數據？
• 配置信息如何管理？

1.1 你可能會這樣作

若是每次新建一個項目得時候，咱們都得手動去處理以上這些問題，那麼將是一個重複性操做，並且還要確保團隊一致，那麼還得考慮約束能力

在沒有看到這個 Fes.js這個解決方案以前，對於上述問題，個人解決方式就是

• 經過維護一個公共的工具庫來封裝,好比axios的二次封裝
• 開發一個簡易的腳手架，把這些東西集成到一個模板中，再經過命令行去拉取

• 直接經過vue-cli生成模板再進行自定義配置修改等等，簡單就是用文檔，工具，腳手架來賦能

  但其實有沒有更好的解決方案？

圖片引自文章《螞蟻前端研發最佳實踐》

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

學習react的童鞋都知道，在react社區有個插件化的前端應用框架 UmiJS，而vue的世界中並不存在，而接下來咱們要分享的 Fes.js，就是vue中的 UmiJS， Fes.js 不少功能是借鑑 UmiJS 作的, UmiJS 內置了路由、構建、部署、測試等，還支持插件和插件集，以知足功能和垂直域的分層需求。

本質上是爲了更便捷、更快速地開發中後臺應用。框架的核心是插件管理，提供的內置插件封裝了大量構建相關的邏輯，而且有着豐富的插件生態，業務中須要處理的髒活累活靠插件來解決，而用戶只須要簡單配置或者按照規範使用便可

甚至你還能夠將插件作聚合成插件集，相似 babel 的 plugin 和 preset，或者 eslint 的 rule 和 config。經過插件和插件集來知足不一樣場合的業務

經過插件擴展 import from UmiJS 的能力，好比相似下圖，是否是很像vue 3的Composition API設計

拓展閱讀：

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

  2. Fes.js

  官方介紹： Fes.js 是一個好用的前端應用解決方案。 Fes.js 2.0 以Vue 3.0和路由爲基礎，同時支持配置式路由和約定式路由，並以此進行功能擴展。匹配了覆蓋編譯時和運行時生命週期完善的插件體系，支持各類功能擴展和業務需求。

2.1 支持約定式路由

約定式路由是個啥？ 約定式路由也叫 文件路由，就是不須要手寫配置，文件系統即路由，如今愈來愈多框架支持約定式路由，包括上文提到的 UmiJS，還有SSR的 nuxt等等，節省咱們手動配置路由的時間. 關於fes更多的路由配置看 路由文檔

2.2 插件化支持

本質上一個插件是就是一個npm包， 經過插件擴展Fes.js的功能，目前 Fes.js已經有多個插件開源。並且插件能夠管理項目的編譯時和運行時 插件文檔

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

彬彬同窗： 那什麼叫支持編譯時和運行時？

能夠這樣理解: 若是是編譯時的配置，就是打包的時候，就根據配置完成相應的代碼構建，而運行時的配置，則是代碼在瀏覽器執行時，纔會根據讀取的配置去作相應處理，若是感興趣，能夠深刻理解下fesjs的插件源碼，瞭解如何根據編譯時和運行時作處理 fes-plugin-access 源碼連接

2.3 Fes.js 如何使用

Fes.js 提供了命令行工具 create-fes-app, 全局安裝後直接經過該命令建立項目模板，項目結構以下所示

而後運行 npm run dev 就能夠開啓你的fes之路, 以下圖所示

2.4 爲啥選擇 Fes.js

像vue-cli 只能解決咱們項目中開發，構建，打包等基本問題，而 Fes.js能夠直接解決大部分常規中後臺應用的業務場景的問題，包括以下

• 配置化佈局：解決佈局、菜單 、導航等配置問題，相似low-code機制
• 權限控制：經過內置的access插件實現站點複雜權限管理
• 請求庫封裝：經過內置的request插件，內置請求防重、請求節流、錯誤處理等功能
• 微前端集成：經過內置qiankun插件，快速集成到微前端中體系

期待更多的插件能夠賦能中後臺應用業務場景

3.回顧 vue 3

3.1 新特徵

vue3.0 相對於 vue2.0變動幾個比較大的點包括以下

• 性能提高： 隨着主流瀏覽器對es6的支持，es module成爲能夠真正落地的方案，也進一步優化了vue的性能
• 支持typescript： 經過ts其類型檢查機制，可避免咱們在重構過程當中引入意外的錯誤
• 框架體積變小：框架體積優化後，一方面是由於引入Composition API的設計，同時支持tree-shaking樹搖，按需引入模塊API，將無用模塊都會最終被搖掉，使得最終打包後的bundle的體積更小
• 更優的虛擬Dom方案實現 : 添加了標記flag，Vue2的Virtual DOM無論變更多少整個模板會進行從新的比對, 而vue3對動態dom節點進行了標記PatchFlag ,只須要追蹤帶有PatchFlag的節點。而且當節點的嵌套層級多的狀況，動態節點都是直接跟根節點直接綁定的，也就是說當diff算法走到了根dom節點的時候，就會直接定位動態變化的節點，並不會去遍歷靜態dom節點，以此提高了效率

• 引入Proxy特性： 取代了vue2的Object.defineProperty來實現雙向綁定，由於其自己的侷限性，只能劫持對象的屬性，若是對象屬性值是對象，還須要進行深度遍歷，才能作到劫持，並不能真正意義上的完整劫持整個對象，而proxy能夠完整劫持整個對象

3.2 關於 Composition API

vue3 取代了本來vue2經過 Options API來構建組件設計（強制咱們進行代碼分層），而採用了相似React Hooks的設計，經過可組組合式的、低侵入式的、函數式的 API，使得咱們構建組件更加靈活。官方定義： 一組基於功能的附加API，能夠靈活地組合組件邏輯

經過上圖的對比，咱們能夠看出Composition API 與 Options API在構建組件的差異，很明顯基於Composition API構建會更加清晰明瞭。咱們會發現vue3幾個不一樣的點：

• vue3提供了兩種數據響應式監聽APIref和reactive，這二者的區別在 reactive主要用於定義複雜的數據類型好比對象，而ref則用於定義基本類型好比字符串
• vue3 提供了setup(props, context)方法，這是使用Composition API 的前提入口，至關於 vue2.x 在 生命週期beforeCreate 以後 created 以前執行，方法中的props參數是用來獲取在組件中定義的props的，須要注意的是props是響應式的, 並不能使用es6解構（它會消除prop的響應性），若是須要監聽響應還須要使用wacth。而context參數來用來獲取attribute，獲取插槽，或者發送事件,好比 context.emit，由於在setup裏面沒有this上下文，只能使用context來獲取山下文

關於vue3的更多實踐後期會繼續更新，本期主要是簡單回顧

你好，我是🌲 樹醬，請你喝杯🍵 記得三連哦～

1.閱讀完記得點個贊哦，有👍 有動力

2.關注公衆號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star✨