ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

大胆预测,2022这6个的vue相关的库会爆火

2022-01-26 10:32:27  阅读:70  来源: 互联网

标签:库会 vue counter Element Plus 2022 UI


但根据我个人理解,下面这 6款vue 相关的库,在 2022 年极有可能会“爆火”,或者“继续爆火”!让我们赶紧学起来!

一、⭐ vueuse: vue开发者专属工具集!

官网地址:vueuse.org/

一款基于Vue组合式API的函数工具集。

在任何可以使用 Vue Composition Api (组合式API) 的环境下,你都可以通过安装 vueuse 工具库,来提高你的开发效率(没错,vue2.xvue3.x 都能玩 )。

可以理解为 vue 专属的 lodash!

它都有哪些工具集呢?那可太多了,只有你想不到,没有你用不到!

总体上分为以下几个类别提供工具函数:

  • 动画
  • 浏览器
  • 组件
  • 格式化
  • 传感器
  • State(状态机)
  • 公共方法
  • 监听
  • 杂项

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

useTemplateRefsList: 这个方法可以在 vue3 组件式 api 中帮助你快速绑定 for 循环中的 组件ref。比自己实现考虑得更加完备。

<script setup lang="ts">
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'

const refs = useTemplateRefsList<HTMLDivElement>() // 用来存储元素 ref 的数组

onUpdated(() => {
  console.log(refs)
})
</script>
<template>
  <!-- 在这里绑定 ref -->
  <div v-for="i of 5" :key="i" :ref="refs.set"></div>
</template>

另外,还有各种形形色色的好用工具,如 useVModeluseInterval, useCssVar 等等,都等着大家去发掘。

简单来说,这是一个能让你更早下班的工具库,早用早下班。

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

天下苦 vuex 久矣!

官网地址: pinia.vuejs.org/

想当年,vuex 顶着 “官方钦定,尤老祖亲传” 的名声独占 vue 状态管理的王座,但太多太多的人在使用时都亲身感受到了其设计上的“复杂”与“不便”。
我随手画了个漫画,表达我的感受:

那么,Pinia 到底有啥优势呢?

  1. 它不用注册 Mutation! Action 就能直接操作 state
  2. 它支持通过插件提升 Pinia 的能力。
  3. 良好的 Typescript 支持。
  4. 服务器端渲染支持。

定义:

// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

使用:

import { useCounterStore } from '@/stores/counter'
export default {
  setup() {
    const counter = useCounterStore()
    counter.count++
    counter.$patch({ count: counter.count + 1 })
    counter.increment()
  },
}

看起来是不是比使用 vuex 要轻便一些?

据说,vuex 5.x 在 API 的设计上也,也参考了 Pinia 的设计思路,由此也能见得 Pinia 也得到了官方的认可。

因此,Pinia 确实值得一学,在 2022 年也是非常有潜力大火的框架。

三、⭐ Element Plus: 真正的 ElementUI 3.0

为啥 ElementUI 2.x 的正统续作叫 Element Plus, 而不叫 Element 3.0

这是个李逵和李鬼的故事,懂的都懂。

官网地址:element-plus.gitee.io/zh-CN/

ElementUI 2.xvue 2.x 版本里最为著名与传播最广的 UI组件库,我想业内大部分人应该都是认可的。

现在 vue3 也成为 vue 的正式版本,随着 vue3 用户的增多,Element Plus 也必然会迎来一次高速增长期。

Element Plus 有什么优点呢?

  1. APIElement UI 2.x 高度一致,迁移代码和学习成本小。
  2. 核心实现Element UI 2.x 高度相似,比如我介绍过的 PopupManager 等。
  3. 使用 css var 的样式定义模式,样式切换更丝滑。
  4. 值得信任的维护团队。

可以大胆预测,Element-Plus 2022年其依然会爆火。

四、⭐ Navie UI:尤某亲自推荐的组件库

非KPI作品,风格讨喜,组件完备,文风亲切。

官方网站:www.naiveui.com/zh-CN

虽然只在一些小型项目及 Demo 中使用了 Navie UI,但这款项目确实是实实在在的讨喜。

它来自一个名叫“图森”公司自用框架的开源,这公司名和这框架名可以说非常有梗了。

来自“图森”的“Navie UI”,emmm....

让我们来简单列举一下此框架的亮点:

  1. 组件完善和丰富程度都非常可观。
  2. 换肤和主题支持非常棒。
  3. TypeScript 优秀的支持。TS YYDS!

我个人是非常喜欢这个项目的,不过它能走多远确实需要时间的验证。

希望它在 2022 能够被更多人喜欢和使用!

五、⭐ NuxtSSR 全村的希望

单页应用万般好,加载慢,SEO得分少。

ReactVue 两家独大(Angular:"我呢?")的当前,我们要一个 web 单页应用(SPA),实在过于简单。
但也引发了其他的问题:单页应用虽然体验极好,但 SEO 确实是短板。

因此,SSR 应运而生。

React 有了 NextVue 也就有了 Nuxt

不过,每一个立志想做好“SSR”的兄弟,可能都得有足够清醒的认识:这是个深坑,清谨慎前行。

2022年,SSR 依然会是众多公司的强需求,vue 目前在 SSR 这块还没出现比 Nuxt 更能打的对手,因此依然可以相信它在本年的表现。

六、⭐ vite:快就是好

webpack 确实好,但它开发时就是慢。

官方网站:vitejs.cn/

Vite(读音类似于[weɪt],法语,快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。

2022 年谁会是前端构建界的王者?我的回答是“webpack”。(vite: 你在我的地盘夸别人?)

webpack 的市场一定会被 vite 蚕食掉一大块,尤其是中小型应用。

为什么?就是因为“快”!

webpack 5 最吸引人的地方是"模块联邦",它奠定了 webpack 5 在微应用场景下的领先性。

但不是所有人都需要“模块联邦”啊,有很多企业的需求就是 SPA,就是短平快,就是上手就能干。

尤某说:vue-cli@next 会基于 vite。(自己体会...)

vite 的增长还远远没达到巅峰,2022值得期待!

结束语

我是春哥
我热爱 vue.js , ElementUI , Element Plus 相关技术栈,我的目标是给大家分享最实用、最有用的知识点,希望大家都可以早早下班,并可以飞速完成工作,淡定摸鱼

标签:库会,vue,counter,Element,Plus,2022,UI
来源: https://blog.csdn.net/BYGFJ/article/details/122696681

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有