elementplus中文官网(大胆预测！2022这6个的vue相关的⭐库会爆火🔥)

鸽子飞翔

2022-04-20 06:45:56

2022年无情地来了，我们前端组离35岁又进了一步。

为了不让自己在35岁被无情淘汰，一定要坚持学习！

毕竟:只要我学得够快，中年危机就追不上我！

2022年前圈会冒出哪些新的黑马？这个没人知道。

但是，根据我个人的理解，以下六个vue相关的库很有可能在2022年爆发或者继续爆发！赶紧学起来吧！

一、⭐ vueuse： vue开发者专属工具集！

官方网站地址:vueuse.org/

基于Vue组合API的功能工具集。

在任何可以使用Vue Composition Api 的环境下，安装vueuse工具库(没错，vue2.x和vue3.x都可以玩)可以提高开发效率。

可以理解为vue的专属lodash！

它有哪些工具集？太多了，只有你想不到，没有你用不到！

通常，工具功能分为以下几类:

动画

浏览器

包裹

格式化

传感器

状态(状态机)

公共方法

班长

杂物

以我自己为例，useTemplateRefsList是我最近在实际项目开发中大量使用的一个超级实用的方法。

usetemplatereflist:这个方法可以帮助你在vue3组件api的for循环中快速绑定组件ref。比自我实现更完整的考虑。

& lt脚本安装语言= & # 34；ts & # 34& gt 从& # 39；导入{ onUpdated }vue & # 39 从& # 39；导入{ useTemplateRefsList };@ vue use/core & # 39； const refs = useTemplateRefsList & lt；html dive element & gt；()//Array on updated(()= >；{ console . log(refs) }) & lt；/script & gt； & lt；模板& gt & lt；！-bind ref here--> & lt；div v-for = & # 34；我的5 & # 34；:key = & # 34我& # 34；:ref = & # 34refs.set & # 34& gt& lt/div & gt； & lt；/template & gt；另外还有各种有用的工具，比如useVModel，useInterval，useCssVar等等，都在等着大家去探索。

简单来说，这就是一个工具库，可以让你早点下班，早点用，早点下班。

二、⭐ Pinia：更好用的 vue store 库( vuex 竞品)

世界已经遭受vuex很久了！

官方网站地址:pinia.vuejs.org/

当时，vuex以“官派，祖辈传下来”的美誉垄断了vue国家管理的宝座，但太多人在使用时亲身感受到了其设计的“复杂”和“不便”。
我随便画了一幅漫画来表达我的感受:

那么，皮尼亚有什么优势呢？

它不需要注册突变！动作可以直接操作状态。

它支持通过插件改进Pinia的功能。

良好的类型脚本支持。

服务器渲染支持。

定义:

//stores/counter . js import { defineStore } from & # 39；皮尼亚& # 39； export const useCounterStore = define store(& # 39；柜台& # 39；，{ state:()= & gt；{ return {count: 0} }， actions:{ increment(){ this。count++ }， }，[/]

从& # 39；导入{ useCounterStore };@/商店/柜台& # 39； export default { setup(){ const counter = useCounterStore() counter . count++ counter。$ patch({ count:counter . count+1 }) counter。increment () }， } 复制代码看起来比用vuex轻吗？

据说vuex 5.x在API设计上也参考了皮尼亚的设计思路，可见皮尼亚也得到了官方的认可。