关于javascript:这个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✨