Мы много думали об этом как команда здесь, в Vue Mastery, и эта статья служит нашим предложением о том, на чем сосредоточиться, если стать лучшим разработчиком Vue, которым вы можете быть, является целью вашего нового года.
Начало нового года — это прекрасная возможность прояснить цели, которые мы хотели бы поставить на будущее. Для разработчиков Vue это означает изучение новых навыков, которые можно добавить в свой арсенал. С новыми навыками мы можем укрепить наши существующие проекты, создать новые интересные функции и оставаться конкурентоспособными, поскольку мы ищем продвижения по службе и большие возможности. Поэтому вам может быть интересно: какие навыки я могу начать изучать сейчас, чтобы перейти на уровень разработчика Vue в 2022 году?
Мы много думали об этом как команда здесь, в Vue Mastery, и эта статья служит нашим предложением о том, на чем сосредоточиться, если стать лучшим разработчиком Vue, которым вы можете быть, является целью вашего нового года.
Новые возможности Composition API
Vue 3 уже больше года, и Composition API зарекомендовал себя как расширенная и модернизированная библиотека для создания высокомодульных, многоразовых и масштабируемых приложений Vue. Как только вы научитесь использовать его новообретенные возможности, Composition API предоставит вам свободу и контроль, которые опытные разработчики смогут по достоинству оценить и использовать в своих интересах.
Из-за того, как он был разработан, Composition API помогает выполнять определенные задачи более эффективно, чем с помощью Options API, а также делает архитектуру сложных функций более гибкой и надежной. Вы можете получить более глубокое представление о том, как это работает под капотом, наблюдая, как Эван Ю исследует исходный код в его Vue 3 Deep Dive.
Одним из примеров того, как Composition API расширяет возможности нашего набора инструментов кодирования, являются composables.
Составные
Используя Composition API, разработчики Vue могут создавать хорошо организованные, прозрачные и пригодные для многократного использования фрагменты реактивного кода, называемые составными, которые можно беспрепятственно использовать в наших компонентах. Вы можете думать о них как о хуках React или миксинах Vue 2, но без недостатков и ловушек миксинов.
В то время как Composition API дает нам расширенный подход к композиции компонентов и архитектуре приложений, он также привел к новым разработкам основной команды, на которые должны обратить внимание разработчики Vue, которые хотят идти в ногу со временем.
Pinia — альтернатива Vuex?
Одной из таких разработок является Pinia, новая парадигма управления состоянием, которая в конечном итоге может стать жизнеспособной, упрощенной (1 КБ) альтернативой Vuex. Возможно, вы заметили открытый RFC для Vuex 5 с API, очень похожим на тот, который используется Pinia.
Pinia началась как эксперимент члена команды Core Vue.js Эдуардо Сан Мартина Мороте, который переосмыслил то, как может выглядеть Global Store для Vue с помощью Composition API. С тех пор он превратился в пакет, основанный на принципах Vuex и формирующий основу для более интуитивно понятного и легкого решения, столь же мощного, как и Vuex.
Он поставляется с:
- Поддержка инструментов разработчика
— Временная шкала для отслеживания действий и мутаций
— Магазины появляются в компонентах, где они используются
– Путешествие во времени и упрощение отладки - Замена модулей в горячем режиме
— Изменяйте свои магазины без перезагрузки страницы
– Сохраняйте существующее состояние при разработке - Расширяемый с помощью плагинов
- Надлежащая поддержка TypeScript или автодополнение для пользователей JS
- Поддержка рендеринга на стороне сервера
Из-за того, насколько захватывающей является эта новая библиотека, мы работаем над курсом, который демонстрирует, как взять приложение, основанное на Vuex, и перевести его на Pinia. Вы можете ожидать, что новые учебные пособия из этого курса будут выпущены в начале 2022 года под руководством Бена Хонга, члена команды Core Vue.js и члена команды Nuxt.js.
Говоря о Nuxt, давайте поговорим о Nuxt 3.
Nuxt 3 на горизонте
Недавно мы выпустили статью о Nuxt 3 и о том, что это значит для вас. Вкратце: фреймворк был полностью переписан с нуля и стал быстрее, производительнее и проще в обслуживании.
Благодаря улучшенному интерфейсу командной строки, новым инструментам, таким как Nuxt Suspense, Nuxt Bridge и Nuxt DevTools, возможности разработчиков значительно улучшились и расширились.
Из-за того, что переписывание выполняется на TypeScript, это означает, что мы получаем возможность проверки типов с поддержкой TypeScript, встроенной в наши приложения Nuxt. Не хотите использовать ТС? Это нормально; это совершенно необязательно.
Однако, если поддержка TypeScript очень важна для вас, вам также будет интересно узнать, как воспользоваться преимуществами следующего пункта в нашем списке.
Синтаксис настройки скрипта
Подобно Nuxt 3, сам Vue 3 также был полностью переписан на TypeScript. Это означает, что мы получаем первоклассную поддержку TypeScript в наших приложениях Vue 3. Но как нам в полной мере воспользоваться преимуществами Vue 3 + TypeScript?
Короткий ответ: синтаксис настройки скрипта. Хотя это, по сути, просто синтаксический сахар для Composition API, он дает нам очень полезные функции для использования при работе с пропсами и эмитами в TypeScript.
В течение следующих нескольких недель мы продолжим выпускать учебные пособия из нашего полного курса, в которых показано, как использовать настройку скрипта, чтобы сделать ваш код Vue более удобным для TypeScript.
Ускорение работы с Vite
К настоящему времени вы, вероятно, слышали о новом инструменте сборки Эвана Ю под названием Vite. Эван называет это «инструментом переднего плана следующего поколения», и, честно говоря, мы с ним согласны.
Vite.js — это инструмент сборки, который поставляется с сервером разработки и объединяет ваш код для производства. Он похож на Vue CLI с точки зрения того, насколько он может ускорить процесс разработки, но значительно быстрее (отсюда и название Vite — по-французски «быстрый») и гораздо более гибкий для процессов сборки, которые требуют более самостоятельной настройки.
Если вы хотите изучить Vite от человека, который его написал, ознакомьтесь с нашим полным семинаром Молниеносные сборки с Vite, который провел Эван Ю.
Запросы с помощью GraphQL
Если вы были в мире веб-разработки какое-то значительное время, вы слышали о GraphQL. Это язык запросов, похожий на SQL, для чтения и изменения данных в API. Предоставляя бэкенд-разработчикам систему типов для описания схемы данных, фронтенд-разработчики могут запрашивать именно то, что им нужно, не больше и не меньше. Это решает врожденные проблемы недостаточной или избыточной выборки в традиционной настройке REST.
Это тот инструмент, который может улучшить совместную работу разработчиков, ясность кода и командное общение, в то же время обеспечивая элемент элегантности кода. Если вам интересно изучить его, ознакомьтесь с нашим курсом Запросы с помощью GraphQL, который ведут Марина Мости и член команды Core Vue Наталья Теплухина.
Что еще вы можете победить?
Хотя этот список не является исчерпывающим, это отличное начало для повышения уровня ваших навыков в 2022 году. Все эти и другие темы уже или скоро будут освещены в нашей растущей библиотеке из более чем 30 премиальных курсов, которые преподают одни и те же люди, создающие технику и работать с ней каждый день.
Если вы еще не являетесь членом сообщества Vue Mastery, мы приглашаем вас присоединиться к нам по очень сниженной цене. В настоящее время мы предлагаем годовую подписку по цене менее 6 месяцев. Не стесняйтесь претендовать на эту цену со скидкой, чтобы начать свой год повышения квалификации вместе с нами.
Первоначально опубликовано на https://www.vuemastery.com 23 декабря 2021 г.
