这个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✨