2022年值得了解的6款 vue 库【“爆”】-Vue.js-PHP中文网

2022年值得了解的6款 vue 库【“爆”】

青灯夜游

发布： 2022-01-24 19:46:56

转载

4089人浏览过

本篇文章给大家分享 6款值得了解的 vue 相关的库，这6款库在2022年极有可能会“爆火”，快来收藏了解吧，希望对大家有所帮助！

2022年值得了解的6款 vue 库【“爆”】

2022 年前端圈又会蹦出什么新黑马呢？这个无人知晓。

但根据我个人理解，下面这 6款和 vue 相关的库，在 2022 年极有可能会“爆火”，或者“继续爆火”！让我们赶紧学起来！【相关推荐：vue.js视频教程】

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

立即学习“前端免费学习笔记（深入）”；

官网地址：https://vueuse.org/

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

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

可以理解为 vue 专属的 lodash!

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

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

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

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

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

<script setup>
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>

登录后复制

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

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

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

天下苦 vuex 久矣！

官网地址：https://pinia.vuejs.org/

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

那么，Pinia 到底有啥优势呢？

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

定义：

// 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 也得到了官方的认可