Введение

И Vue.js, и React.js — великолепные библиотеки MVVM. Оба удобны для разработчиков, которые признают ограничения jQuery и работают непосредственно с DOM. Одна из проблем, которую решают такие библиотеки, заключается в том, что сложно создавать большие интерактивные приложения с императивным кодом. Фактически 2021 год стал первым годом, когда большинство разработчиков предпочли React.js jQuery.

В другом опросе Восходящие звезды JavaScript 2021 года Vue.js фактически лидирует, если рассматривать версию 3. Если вы любопытны и непредубеждены, как я, и вы рассматриваете Vue.js как альтернативу React.js, эта статья для вас.

Для краткости я буду использовать React и Vue без расширений. И «Vue» относится к «Vue 2», если не указано иное.

Впечатления

Я считаю, что и Vue, и React предоставляют отличные экосистемы вспомогательных инструментов, которые облегчают внедрение в любую команду, которая хочет изучать и использовать эти типы интерфейсных технологий.

Сейчас мне нравятся они оба, но поначалу я несколько месяцев боролся за то, чтобы работать с Vue так же эффективно, как с React. Эта статья содержит несколько размышлений, которыми я считаю полезным поделиться, чтобы читатели могли изучать Vue более плавно и без проблем.

Инструменты

Инструменты JavaScript дикие. 🤪 Это была бесконечная эволюция в различных аспектах.

Все популярные библиотеки и фреймворки, такие как React, Vue, Angular, Svelte и другие, включают сообщества ярких и трудолюбивых разработчиков с открытым исходным кодом, которые вносят огромный вклад. Вот почему в этом пространстве происходит непрерывная эволюция и инновации.

В целом, я впечатлен экосистемой инструментов Vue.

Начну с этой темы, потому что она важная, хотя для некоторых и скучная. Каждое готовое к производству приложение нуждается в оптимизации и/или преобразовании кода. На рынке существует множество проверенных решений с открытым исходным кодом, и Vue предлагает интеграцию для любых потребностей и уровня знаний.

Начнем с самого простого: мне очень нравится процесс адаптации Vue CLI. Он хорошо поддерживается и имеет плагины для наиболее важных задач, таких как компиляция/транспиляция, тестирование с помощью jest, анализ с помощью eslint и т. д. По сравнению с CRA мне больше нравится DX Vue CLI.

Еще один простой вариант — Laravel Mix. Это абстракция поверх Webpack, которая позволяет пользователям быстро начать работу и выполнять свою работу, не слишком заботясь о деталях конфигурации. Глубокие настройки возможны, конечно, за счет постепенного раскрытия сложности Webpack: опытные пользователи Webpack могут постепенно настраивать особенности, не начиная с нуля и не выбрасывая.

Laravel Mix хорошо работает с проектами, загружаемыми с помощью Vue CLI, при условии, что конфигурации babel/eslint/jest поддерживаются должным образом. Laravel в сочетании с Laravel Mix — это эффективная цепочка инструментов для PHP-разработчиков, и поэтому разработчики Vue часто специализируются на стеке PHP (LAMP), а не на стеках JavaScript (MEAN-ish).

Для экспертов Vite стал трендовым проектом за последние пару месяцев. Его нет на основном сайте Vue, он не так тесно интегрирован и ориентирован только на Vue. Это ориентировано на будущее, идя в ногу с тенденцией использования инструментов, отличных от JavaScript, по уважительной причине.

IDE и браузерные инструменты разработки

Код VS не так хорош для понимания кода Vue, как код React из коробки. Предложения автозаполнения и ссылки между определениями кода и использованием не всегда полезны, но это не большая проблема.

Расширение, которое я рекомендую, это Vetur, которое охватывает почти все необходимые функции. Единственное другое дополнительное расширение, связанное с Vue, которое я использую, — это Sarah Drasner’s Vue VSCode Snippets.

Когда дело доходит до интеграции с браузером, Vue Devtools — лучшее решение. Это здорово: древовидное представление компонентов чистое и без помех. Существуют готовые интеграции для Vuex и Vue Router.

Шаблоны

Этот раздел посвящен теме стиля написания кода и синтаксиса в Vue. Это будет зависеть от выбора из раздела инструментов и их конфигураций. В следующих абзацах я буду предполагать, что читатель уже придерживается подхода один компонент файла.

История

React представил JSX. Он прошел боевые испытания и был выбран многими командами разработчиков, несмотря на первоначальную критику. JSX — это просто javascript, и при этом большое внимание уделяется компонентно-ориентированной разработке и композиции. В конце концов, компонент React — это просто функция. Стиль JSX хорошо подходит для команд с более глубоким знанием JavaScript, помимо jQuery и функций ES6+.

Забудьте о JSX при работе с Vue.

Когда дело доходит до Vue, веб-разработчики с опытом работы с PHP и jQuery ценят синтаксис Vue, потому что шаблоны Vue больше связаны с HTML, чем с JavaScript. Так что да, когда вы работаете с разработчиками, которые привыкли создавать динамические HTML-шаблоны со встроенными переменными, операторами управления и циклами, Vue более привлекателен и понятен.

Интересным фактом из истории является то, что синтаксис Vue по умолчанию вдохновлен Angular 1, а не шаблонами PHP. Angular 1 только что вошел в EOL (фазу конца жизни), но он сыграл ключевую роль в превращении стека MEAN в жизнеспособную альтернативу стеку LAMP десять лет назад.

В Google Creative Labs Эван впервые начал свою работу над Vue. По мере роста проекта команда начала использовать Angular 1. В нем было слишком много функций, которые им не нужны. Эвану также не нравились некоторые дизайнерские решения, которые были в Angular 1. Итак, Эван начал работать над библиотекой шаблонов только для личного пользования. Через шесть месяцев, в феврале 2014 года, он официально выпустил его как Vue.js. (источник)

Хорошо знать немного истории, но какие ключевые понятия нужно усвоить, чтобы сгладить кривую обучения, когда дело доходит до шаблонов Vue?

Ключевые особенности и концепции

🔧 Атрибуты [документация]

Элементы в HTML имеют атрибуты; это дополнительные значения, которые настраивают элементы или корректируют их поведение различными способами в соответствии с критериями, которые нужны пользователям. ( "источник")

🧩 Слоты [документация]

Еще одна уникальная особенность Vue, которая напоминает (более или менее) children prop is in React, облегчающая наследование и композицию компонентов. В мире PHP это переводится (более или менее) как расширяет и блокирует ветку.

Слоты — это функция, которую необходимо прочитать и понять, поскольку она обеспечивает гибкость и возможность повторного использования кода.

🔗 Ссылки [документация]

Они похожи на других рефов, да. Их следует использовать осторожно, потому что легко ввести подозрительный код из-за непонимания границ между DOM и Vue.

Ссылки в Vue возвращают объект элементов DOM и экземпляров компонентов. Это означает, что существует комбинация различных API. Нет никаких ограничений в отношении нарушения границ, которые я только что упомянул, поэтому может случиться так, что будут вызываться методы Vue (вместо DOM), что приведет к непреднамеренным и трудным для отладки изменениям данных.

Ссылки следует использовать для управления фокусом, а не для управления состоянием.

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

Реквизит

Когда дело доходит до определения свойств компонентов и их проверки, мне иногда не хватает функций и возможной строгости, которые предоставляет React.

и иногда TypeScript сверху позволяет определять формы и проверки в деталях, тогда как проверки Vue props менее строгие.

Здесь на ум приходит важное замечание: невозможно использовать значения в файле компонента Vue без определения свойства объекта props.

Государственное управление

Концепция состояния не так заметна в Vue, как в React. Напомним, что React предоставляет функцию, которая делает именно то, в честь чего она названа. Каждое изменение состояния вызывает повторный рендеринг.

Vue предоставляет функцию, которая возвращает реактивные переменные. Труднее всего было уложить в голове реактивность. Вложенные объекты остаются реактивными и отслеживают изменения при передаче с помощью операций присваивания по умолчанию. По моему личному мнению, это лучшая и худшая особенность Vue.

Поэтому моя первая рекомендация всем, у кого проблемы с реактивностью во вложенных объектах: justjavascript.com. Это отличный ресурс для глубокого понимания объектов в JavaScript. В условиях повышенной сложности вложенных компонентов и структур данных в Vue жизненно важно знать, как разорвать ссылку, чтобы избежать непреднамеренных изменений состояния.

И при обсуждении сложности вот моя вторая рекомендация: внимательно рассмотрите управление состоянием в Vue и Vuex. Это не добавляет дополнительной сложности, а также вдохновлено Flux, как и Redux.

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

Недавно наткнулась на Пинию, но не пробовала и не пользовалась. И, кстати, Vue 3 использует прокси, что является другим подходом к реактивности по сравнению с Vue 2.

Управление реактивным состоянием — это самый важный навык, который необходимо приобрести.

Вычисляемые свойства

Вычисляемые свойства — уникальная особенность Vue. Они облегчают кэширование реактивных переменных. Я намеренно оставил их напоследок, потому что это техника оптимизации, которую легко понять, когда data() и концепции методов освоены должным образом.

Экосистема

Vue предоставляет отличную экосистему готовых решений:

Все это легче изучить и внедрить по сравнению с альтернативами React.

Образовательные ресурсы

Хотя у каждого разработчика есть свой уникальный подход к изучению новых технологий, платформа Vue Mastery — это то, что я рекомендую в качестве первого шага на пути к мастерству 😉.

Сплоченная команда опытных профессионалов с отличным подходом к обучению, подобным CodeSchool. Дополнительным мотивационным фактором, по крайней мере для меня, является то, что платформа вносит финансовый вклад в проект Vue.

Конечно, есть еще несколько очень полезных ресурсов:

Выводы

Я надеюсь, что эта статья будет полезна всем, кто хочет изучить Vue.js с нуля. Предыдущее знание React.js полезно, потому что я делаю несколько сравнений и ассоциаций.

Ключевые моменты, которые нужно убрать, остались бы теми же, даже если бы я отбросил все сравнения.

Vue.js — это восхитительная библиотека, а ее сообщество и экосистема вспомогательных инструментов упрощают адаптацию и внедрение новых или существующих проектов.

Первоначально опубликовано на https://kalinchernev.github.io.