前言：前段时间开始落地基于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✨