Vue.js для разработчиков React

React — одна из самых популярных библиотек JavaScript для создания пользовательских интерфейсов в последние годы. Однако, если вы разработчик React, вам может быть интересно попробовать Vue.js. В этом сообщении блога мы рассмотрим сходства и различия между React и Vue.js и то, как вы можете использовать свои знания React для изучения Vue.js. На простых примерах сравним концепции React с их реализацией во Vue.js. Создание компонентов в React и Vue.js похоже на создание гамбургеров из одних и тех же ингредиентов, объединенных по-разному. В следующих примерах мы создадим наши собственные компоненты бургера, сравнив различные подходы и синтаксис. Итак, давайте посмотрим, что из них интереснее готовить, а что в итоге получается вкуснее.

Сходства

React и Vue.js имеют некоторые сходства. Обе являются библиотеками JavaScript, которые позволяют нам создавать пользовательские веб-интерфейсы. Оба они используют виртуальный DOM, что позволяет эффективно обновлять пользовательский интерфейс без повторного рендеринга всей страницы. Оба также имеют компонентную архитектуру, что означает, что вы можете разбить свой пользовательский интерфейс на более мелкие повторно используемые компоненты. Кроме того, и React, и Vue.js предлагают отличные инструменты для разработчиков, такие как React Developer Tools и Vue.js Devtools соответственно. Обе библиотеки имеют открытый исходный код и обещают быть быстрыми и легкими.

Отличия

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

Еще одно отличие заключается в синтаксисе того, как отображать содержимое на странице. В то время как мы используем JSX для создания компонентов в React, Vue.js использует шаблоны HTML (с возможностью записи JSX). Одним из преимуществ разделения HTML, CSS и JS в Vue является более плоская кривая обучения для разработчиков, знакомых с традиционным подходом к написанию HTML, CSS и JavaScript.

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

Структура компонентов

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

В Vue.js аналогичный компонент может быть создан с использованием однофайлового компонента, который включает в себя шаблон, скрипт и раздел стилей, где раздел шаблона содержит HTML-структуру компонента, а раздел скрипта содержит логику компонента и предоставляет компонент в качестве экспорта файла по умолчанию. Чтобы использовать другие компоненты в качестве дочерних, их необходимо импортировать и зарегистрировать с параметром components.

Реквизит

Мы используем реквизиты для передачи информации дочерним компонентам и позволяем компонентам взаимодействовать друг с другом. В React мы читаем реквизиты, которые компонент получает из параметров функционального компонента. Чтобы передать их дочернему компоненту, мы добавляем их в тег JSX.

Чтобы передать свойства дочерним компонентам в Vue.js, мы должны использовать различные «директивы», которые определяют определенные формы поведения для самого компонента и его свойств. Чтобы привязать значение свойства к компоненту одним способом, нам нужно использовать директиву v-bind в качестве префикса или ее сокращение :. Подобно фигурным скобкам в React, мы используем эту директиву для любого реквизита, который не является строкой.
Чтобы прочитать реквизиты, которые получает компонент, мы должны определить каждый реквизит внутри параметра props.

Условный рендеринг

Часто мы хотим отображать определенные элементы в зависимости от различных условий. Чтобы отобразить JSX на основе этих условий, мы можем использовать такие операторы, как ? и &&, или использовать операторы if в React.

Для условного рендеринга элементов Vue.js предоставляет различные директивы, такие как v-if/ v-else (где элемент не отображается) или v-show (который отображает, но скрывает элемент).

Рендеринг списка

Если мы хотим визуализировать компонент несколько раз на основе набора данных. В React мы используем методы массива JavaScript, такие как map, которые преобразуют нашу коллекцию данных в список компонентов.

Поскольку Vue.js предоставляет еще одну директиву для достижения этой цели. Мы можем просто использовать директиву v-for для компонента, который должен отображаться как элемент списка, и передать массив этому свойству.

Состояние компонента и методы

Для управления состоянием компонента мы в основном используем хук useState в React. Вся логика компонента определяется непосредственно внутри самой функции компонента.
В нашем примере мы хотим иметь возможность изменять количество каждого ингредиента в нашем бургере. Для этого мы создаем Builder, который позволяет нам выбирать предпочитаемые ингредиенты.

В Vue.js процесс определения и изменения состояния довольно прост по сравнению с подходом React. Опция data инициализирует состояние и предоставляет доступ к каждому члену, который может быть обновлен напрямую без использования функции установки.
Функции компонента определяются внутри опции methods. Доступ к членам компонента должен осуществляться через this.

События

Если мы хотим передать обработчик события компоненту в React, мы сначала определяем функцию, которую мы передаем в качестве реквизита для соответствующего тега JSX. Мы можем просто передать это свойство вниз по дереву компонентов и вызвать обработчик в компоненте, который генерирует событие.

Передача обработчиков событий в Vue.js в некоторых отношениях работает иначе. Чтобы связать обработчик с его событием, мы используем директиву v-on (сокращенно @). Этот обработчик не передается вниз по дереву компонентов соответствующему потомку. Чтобы поднять событие вверх по дереву, каждый компонент должен генерировать новое событие, и его родитель может прослушивать его с помощью директивы v-on.

Крючки жизненного цикла

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

В то время как хук useEffect обеспечивает большую гибкость, поскольку его можно использовать для обработки различных действий, Vue.js предоставляет более явные хуки для обработки действий в жизненном цикле компонента. Мы можем использовать такие методы, как created, beforeMount, updated или beforeUnmount. Эти методы предлагают простой способ выполнения действий на протяжении жизненного цикла компонента, и особенно для новичков они могут быть проще для понимания, чем правильное использование хука useEffect в React.

Наблюдатели и наблюдаемые

В дополнение к методам жизненного цикла Vue.js также предлагает явную концепцию регистрации изменений определенного состояния. Там, где мы могли бы также использовать хук useEffect в React, который, например, вызывается всякий раз, когда изменяется состояние, мы можем реализовать метод watch внутри компонента Vue. Имя функции-наблюдателя всегда отражает переменную, от которой она зависит.

В некоторых случаях мы хотим получить некоторое значение из текущего значения состояния в нашем компоненте. Там, где мы использовали бы хук useMemo в React, Vue.js предоставляет «вычисляемые свойства», которые динамически обновляются всякий раз, когда изменяется значение зависимого состояния. Здесь зависимости не нужно указывать явно, как в React, Vue.js обрабатывает их неявно.

Передача дочерних элементов

Во многих случаях мы хотим вложить компоненты или содержимое в другие компоненты. В React мы бы вложили этот контент в тег JSX нашего компонента, который получает этот контент как children prop, который затем может быть отображен компонентом.

В Vue.js мы также просто вкладываем содержимое в теги нашего компонента. Однако внутри компонента мы должны определить slot, который определяет, где должен отображаться дочерний контент. В отличие от React, слоты более универсальны и, например, позволяют нам определять именованные слоты как отдельные заполнители для контента, который может быть заполнен родительским компонентом.

Заключение

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

После работы над проектами, реализованными с помощью React и Vue.js, у каждого из них есть свои плюсы и минусы. Хотя Vue.js легче освоить людям, уже знакомым с HTML и CSS, концепция HTML-шаблонов иногда приводит к большему количеству шаблонного и менее понятного кода. Особенно в больших приложениях я столкнулся с проблемой найти почву в большой кодовой базе. React, с другой стороны, имеет более крутую кривую обучения, но для меня он обеспечивает более легкий подход к созданию повторно используемых компонентов, которые хорошо масштабируются с растущим продуктом.

В конце концов, у каждого есть свой уникальный вкус в том, как им нравится готовить гамбургеры из ингредиентов, которые они предпочитают. В React мне нравится полный контроль над каждым ингредиентом и гибкость подхода JavaScript в сочетании с хорошо зарекомендовавшей себя и задокументированной экосистемой. Но мне также нравится простота и удобство использования Vue, особенно для небольших проектов или для разработчиков, которые плохо знакомы с созданием веб-приложений. Реактивность и привязка данных в Vue.js просты и легки в реализации по сравнению с хуками в React, которые иногда более сложны и требуют более глубокого понимания концепций JavaScript.

Тем не менее, обе библиотеки отлично подходят для создания веб-интерфейсов и предоставляют богатые экосистемы и активные сообщества.

Пришло время строить

В & мы видим сильные стороны и возможности как Vue.js, так и React. Мы понимаем, что проекты имеют разные требования и предпочтения. Мы выбираем фреймворки и библиотеки, которые лучше всего подходят для проекта, клиента и команды, чтобы создавать надежные и масштабируемые веб-приложения.

Дайте мне знать о своем мнении и не стесняйтесь обращаться, если у вас есть какие-либо вопросы.