Какая новая темная лошадка появится в сфере фронтенда в 2022 году? Никто этого не знает.
Насколько я понимаю, следующие шесть библиотек, связанных с Vue, скорее всего, взорвутся или продолжат стремительно развиваться в 2022 году. !
Давайте учиться быстро!
1. ⭐ VueUse: эксклюзивный набор инструментов для разработчиков Vue!
В любой среде, которая может использовать 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
?
- Не нужно регистрироваться.
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
также относится к дизайнерским идеям Pinia в разработке API, что показывает, что Pinia также была официально признана.
Поэтому Pinia
действительно стоит изучить, и это также очень потенциальная основа для огня в 2022
.
3. ⭐ Element Plus: настоящий ElementUI 3.0
"Веб-сайт"
Каковы преимущества Element Plus
?
API
полностью соответствуетElement UI 2.x
, а код миграции и затраты на обучение невелики.The core implementation
очень похож наElement UI 2.x
, такой какPopupManager
, который я представил.- При использовании режима определения стиля
css var
переключение стилей происходит более плавно. - Надежная ремонтная бригада.
Можно смело предсказать, что Element-Plus
все равно взорвется в 2022 году.
4. ⭐ Navi UI: рекомендованная Вами библиотека компонентов
"Веб-сайт"
Хотя Navie UI
используется только в некоторых небольших проектах и демонстрациях, этот проект действительно забавный.
Кратко перечислим основные моменты этого фреймворка:
- Полнота и богатство компонентов очень впечатляют.
- Скиннинг и поддержка тем великолепны.
- Отличная поддержка 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 год стоит ждать с нетерпением!