React - самая популярная интерфейсная библиотека за последние несколько лет.
Vue - это интерфейсный фреймворк, который в последние несколько лет по популярности догоняет React.
Трудно выбрать между двумя фреймворками, поскольку у них есть свои плюсы и минусы. Выбирая одно из них, мы должны придерживаться его в течение нескольких лет.
В этой статье мы сравним основные функции этих двух фреймворков, которые создают приложение и отображают данные.
Создание приложения
В React есть программа командной строки Create React App, которая позволяет нам создавать каркас приложения с помощью JavaScript или TypeScript.
Он имеет встроенную поддержку для создания прогрессивных веб-приложений.
Приложение Create React может запускать тесты, которые находятся в папке __tests__.
Vue имеет Vue CLI для создания приложения с помощью JavaScript или TypeScript, плюс мы можем включить CSS, SASS, Less и т. Д. Для стилизации. Мы также можем добавить инфраструктуру тестирования прямо в наш каркас, изменив параметры, отображаемые в интерфейсе командной строки Vue.
Мы также можем добавить Vue Router и Vuex из Vue CLI.
Он также поддерживает создание прогрессивных веб-приложений.
Vue CLI имеет графический интерфейс для быстрого создания проектов прототипов приложений.
Помимо использования программ CLI, мы можем использовать тег скрипта для добавления React и Vue в наше приложение.
Однако большинство библиотек React доступны только в виде пакетов NPM. В то время как многие библиотеки Vue можно добавить через тег скрипта.
Это означает, что Vue больше подходит для улучшения устаревших приложений, поскольку они часто не имеют интерфейсов, созданных с использованием современных фреймворков и инструментов сборки.
Это также делает Vue лучшим выбором для быстрого прототипирования, поскольку мы можем просто добавлять библиотеки с помощью тегов скриптов и использовать их, не думая об инструментах сборки и каркасе.
Синтаксис шаблона
Большинство приложений React используют JSX для отображения данных на экране. Это ярлык для вызова метода React.createElement.
Шаблоны Vue имеют собственный синтаксис. Например, мы используем двойные фигурные скобки для отображения переменных на экране.
Например, мы можем написать следующее, чтобы отображать значение переменной в приложении React:
import React, { useState } from "react";
export default function App() {
const [foo] = useState("foo");
return <div className="App">{foo}</div>;
}
В то время как мы пишем следующее, чтобы отображать значение переменной в приложении Vue:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{foo}}
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
foo: "foo"
}
});
В приведенном выше коде мы отображаем значение свойства foo в data в шаблоне, написав:
{{foo}}
Способ React немного проще в том, что мы помещаем все в одну и ту же компонентную функцию.
С другой стороны, мы добавили то, что хотим отображать с помощью Vue, в отдельный шаблон.
В обоих случаях нам нужно изучить новый синтаксис.
Условно отображать данные
В приложениях React мы отображаем элементы условно с помощью обычных операторов if или switch в методе рендеринга компонентов класса или возвращаем JSX в функциональных компонентах.
Логика их включения и выключения находится в самом файле компонента.
Например, мы можем написать следующее, чтобы включать и выключать что-то в приложении React:
import React, { useState } from "react";
export default function App() {
const [show, setShow] = useState();
const toggleShow = () => {
setShow(!show);
};
return (
<div className="App">
<button onClick={toggleShow}>Toggle</button>
{show && <div>foo</div>}
</div>
);
}
В приведенном выше коде мы добавили кнопку переключения, а затем состояние show с функцией setShow переключает состояние show между true и false.
Затем мы показываем div условно с помощью:
{show && <div>foo</div>}
В Vue мы отображаем элементы в шаблоне и используем v-if для управления им.
Например, для этого мы можем написать следующий код:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="toggle">Toggle</button>
<div v-if="show">foo</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
show: false
},
methods: {
toggle() {
this.show = !this.show;
}
}
});
В приведенном выше коде мы заставили метод toggle включать и выключать this.show.
Затем мы добавили кнопку Toggle для вызова toggle и условного отображения с помощью директивы v-if.
Как мы видим, реализация React проще, чем реализация Vue.
Мы также должны понимать части компонента Vue, например, когда вызываются методы компонентов и где хранятся состояния.
С ловушкой useState React это становится более очевидным. Нам также не нужно что-то добавлять в шаблоны и компоненты, чтобы что-то добавить.
Мы можем добавить все в один файл с компонентами React. Это удобнее для простых компонентов.
Однако подход Vue более удобен для отделения логики от кода отображения.
Это более чистый подход к организации компонента, когда вещи более сложные.
Вердикт
Vue - это скорее полноценный фреймворк, в отличие от React, который больше похож на библиотеку.
Vue CLI имеет гораздо больше возможностей для создания приложения с параметрами, необходимыми для создания приложения.
В приложении Create React есть только варианты для создания базового приложения, в котором нет маршрутизации или какого-либо решения для управления состоянием.
Это не идеально, поскольку большинство людей предпочитают одностраничное приложение, а не улучшать устаревшее приложение.
Кроме того, библиотеки Vue доступны в виде тегов сценариев, тогда как большинство библиотек React доступны только в виде пакетов Node.
Vue - явный победитель с Vue CLI с его опциями.
Отображение данных похоже как на React, так и на Vue. Они оба требуют некоторой логики и отображают элементы, а также условно отображают элементы на экране.
У них обоих есть свои собственные рабочие процессы, но в дизайне Vue есть более четкое разделение между логикой и шаблонами, тогда как React помещает все в одно место.
Vue лучше подходит для сложной логики отображения, а React лучше для простой логики.
