Какая новая темная лошадка появится в сфере фронтенда в 2022 году? Никто этого не знает.

Насколько я понимаю, следующие шесть библиотек, связанных с Vue, скорее всего, взорвутся или продолжат стремительно развиваться в 2022 году. !

Давайте учиться быстро!

1. ⭐ VueUse: эксклюзивный набор инструментов для разработчиков Vue!



VueUse
Набор основных утилит Vue Composition Utilities. Более 140 функций на ваш выбор. Работает только для Vue 3 и 2…vueuse.org



В любой среде, которая может использовать Vue Composition API, вы можете повысить эффективность разработки, установив библиотеку инструментов vueuse (да, vue2.x и vue3.x могут воспроизводиться).

Это можно понять как lodash вместо vue!

Какой у него набор инструментов? Это слишком много, и только ты не можешь об этом думать, ты не можешь использовать это без тебя!

Как правило, он делится на следующие категории для обеспечения служебных функций:

  • анимация
  • браузер
  • компоненты
  • формат
  • датчик
  • Состояние (машина состояний)
  • общедоступный метод
  • монитор
  • Разнообразный

Если взять себя в качестве примера, useTemplateRefsList это очень практичный метод, который я недавно часто использовал при разработке реальных проектов.

useTemplateRefsList: Этот метод может помочь вам быстро связать component refs в циклах for в vue3 component api. Думайте более полно, чем реализуйте это самостоятельно.

<script setup lang="ts">
import { onUpdated } from 'vue'
import { useTemplateRefsList } from '@vueuse/core'
const refs = useTemplateRefsList<HTMLDivElement>() // an array to store the element ref
onUpdated(() => {
  console.log(refs)
})
</script>
<template>
  <!-- bind ref here -->
  <div v-for="i of 5" :key="i" :ref="refs.set"></div>
</template>

Кроме того, есть всевозможные полезные инструменты, такие как useVModel, useInterval, useCssVar и т. д., и все они ждут, пока вы их откроете.

Короче говоря, это библиотека инструментов, которая позволяет вам уйти с работы раньше и уйти с работы раньше.

2. ⭐ Pinia: библиотека магазина Abetter Vue (конкурент Vuex)

"Веб-сайт"

В свое время 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 также относится к дизайнерским идеям Pinia в разработке API, что показывает, что Pinia также была официально признана.

Поэтому Pinia действительно стоит изучить, и это также очень потенциальная основа для огня в 2022.

3. ⭐ Element Plus: настоящий ElementUI 3.0

"Веб-сайт"

Каковы преимущества Element Plus?

  1. API полностью соответствует Element UI 2.x, а код миграции и затраты на обучение невелики.
  2. The core implementation очень похож на Element UI 2.x, такой как PopupManager, который я представил.
  3. При использовании режима определения стиля css var переключение стилей происходит более плавно.
  4. Надежная ремонтная бригада.

Можно смело предсказать, что Element-Plus все равно взорвется в 2022 году.

4. ⭐ Navi UI: рекомендованная Вами библиотека компонентов

"Веб-сайт"

Хотя Navie UI используется только в некоторых небольших проектах и ​​демонстрациях, этот проект действительно забавный.

Кратко перечислим основные моменты этого фреймворка:

  1. Полнота и богатство компонентов очень впечатляют.
  2. Скиннинг и поддержка тем великолепны.
  3. Отличная поддержка TypeScript. ТС - Бог!

Мне лично очень нравится этот проект, но действительно нужно время, чтобы увидеть, как далеко он может зайти.

Надеюсь, что в 2022 году он понравится большему количеству людей!

5. ⭐ Nuxt: Надежда всей деревни ССР

"Веб-сайт"

В тот момент, когда доминируют React и Vue (Angular: «А как насчет меня?»), нам нужно web одностраничное приложение (SPA), которое слишком простое. Но это также вызвало другие проблемы: хотя одностраничные приложения имеют большой опыт, SEO на самом деле является недостатком.

Таким образом, SSR появился на свет.

React имеет Next, Vue имеет Nuxt.

Однако у каждого брата, решившего заняться «ССР», может быть достаточно осознания: осторожно, это глубокая яма.

В 2022 году SSR по-прежнему пользуется большим спросом у многих компаний.

6. ⭐ Vite: Быстро хорошо

"Веб-сайт"

Кто станет королем фасадной строительной отрасли в 2022 году? Мой ответ: Webpack. (Vite: «Вы хвалите людей на моем сайте?»)

Тем не менее, рынок Webpack выкачает большую часть Vite, особенно малых и средних приложений.

Почему? Именно потому, что «быстро»!

Наиболее привлекательным местом Webpack 5 является «Модульная федерация», которая закладывает лидера Webpack 5 в сценарии микроответа.

Но не всем нужна «модульная федерация». Многие люди требуют SPA, что быстро, просто начните.

Рост Вите далек от своего пика. 2022 год стоит ждать с нетерпением!

Узнать больше