Грубое сравнение двух фреймворков Vue и React

Vue.js

image

основное введение

React — фреймворк пользовательского интерфейса JavaScript, созданный Facebook. Он лежит в основе большинства сайтов Facebook, включая Instagram. React, в отличие от таких фреймворков, как jQuery, Backbone.js и Angular 1, которые были популярны в то время, изменил мир JavaScript с момента своего рождения. Одним из самых больших изменений является то, что React популяризировал Virtual DOM (Виртуальный DOM) и создал новый синтаксис — JSX, JSX позволяет разработчикам писать HTML на JavaScript (Примечание переводчика: HTML на JavaScript).

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

сходства

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

  • Обе являются библиотеками JavaScript для создания пользовательского интерфейса;
  • Оба быстрые и легкие;
  • Оба имеют компонентную архитектуру;
  • Все используют виртуальный DOM;
  • Все они могут быть помещены в один файл HTML или стать модулями в более сложных настройках веб-пакета;
  • Существуют независимые, но широко используемые библиотеки управления маршрутизаторами и состояниями;

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

разница

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

  • Компоненты Vue делятся на глобальную регистрацию и локальную регистрацию.В реакции соответствующие компоненты импортируются, а затем ссылаются на них в шаблоне;

  • Пропсы могут динамически изменяться, а подкомпоненты обновляться в режиме реального времени.В React официально рекомендуется, чтобы пропсы были как чистые функции, с согласованным вводом и выводом, и не рекомендуется менять представления через пропсы;

  • Дочерний компонент обычно вызывает опцию props явно, чтобы объявить данные, которые он ожидает получить. В реакции это не обязательно, а в двух других есть механизм проверки реквизита;

  • Каждый экземпляр Vue реализует интерфейс событий для облегчения связи между родительскими и дочерними компонентами.В небольших проектах нет необходимости внедрять механизм управления состоянием, и react должен реализовать его сам;

  • Распространяйте содержимое с помощью слотов, что позволяет смешивать содержимое родительского компонента с собственным шаблоном дочернего компонента;

  • Существует больше систем инструкций, так что шаблон может выполнять более богатые функции, в то время как React может использовать только синтаксис JSX;

  • Vue добавляет вычисляемый и наблюдаемый синтаксический сахар, но в React вам нужно написать набор логики для его достижения;

  • Идея реакции вся в js, а html генерируется через js, поэтому jsx спроектирован, а js используется для работы css, styled-component, jss сообщества и т.д. css, js вместе, использование Для соответствующих методов обработки Vue имеет однофайловый компонент, который может записывать html, css и js в один файл, а html предоставляет механизм шаблонов для его обработки.

  • React делает очень мало вещей, и многие из них оставлены сообществу.Многие вещи в Vue встроены, что действительно удобно писать.Например, combReducer of redux соответствует модулям vuex, например, reselect соответствует getter и vue компоненты vuex.Вычисляемая мутация vuex — это исходные данные, которые изменяются напрямую, в то время как редуктор редукса возвращает совершенно новое состояние, поэтому редукс объединяет неизменяемые для оптимизации производительности, а vue в этом не нуждается.

  • Общая идея реакции функциональна, поэтому рекомендуются чистые компоненты, данные неизменяемы, и поток данных односторонний.Конечно, это можно сделать и в двусторонних местах.Например в сочетании с redux-form , горизонтальное разделение компонентов обычно выполняется через компоненты высокого уровня. А vue — это переменная данных, двусторонняя привязка, декларативное написание, а миксин во многих случаях используется для горизонтального разделения компонентов vue.

общественная деятельность

Судя по производительности github двух

react

vue

Видно, что количество звезд Vue уже является самым популярным во фронтенд-фреймворке. С точки зрения обслуживания, реакция поддерживается Facebook, и хотя на данном этапе у vue есть команда, в основном именно Ю Юйси поддерживает и вносит свой код, а гибридная платформа с открытым исходным кодом Alibaba weex также основана на vue, поэтому мы считаем, это будет в будущем, будет поддерживаться большим количеством людей и команд. По неполной статистике, в том числе Ele.me, Jianshu, AutoNavi, Rare Earth Nuggets, Suning.com, Meituan, Tmall, Lizhi FM, Fangduoduo, Laravel, htmlBurger и другие известные отечественные и зарубежные компании используют vue для разработки новых проекты и фронтенд-рефакторинг старых проектов.

Компании, использующие vue

По неполной статистике, известные отечественные и иностранные компании, включая Ele.me, Suning.com, Meituan, Tmall, Laravel, htmlBurger и др., используют vue для разработки новых проектов и реконструкции фронтенда старых проектов.

Компании, использующие реакцию

image

экология пользовательского интерфейса

У React есть материальный дизайн, муравьиный дизайн Ant Financial и т. д. У Vue есть element и iview, созданные Ele.me.

image

image

Суммировать

Преимущества Vue включают в себя:

  • Гибкий выбор шаблонов и функций рендеринга
  • Простой синтаксис и создание проекта
  • Более быстрый рендеринг и меньший размер

К преимуществам React относятся:

  • Лучше для больших приложений и лучшей тестируемости
  • Применимо как к веб-приложениям, так и к нативным
  • Больше поддержки и инструментов из более крупной экосистемы

На самом деле, React и Vue — очень хорошие фреймворки, в которых больше сходства, чем различий, и большинство их лучших функций схожи:

  • Быстрый рендеринг с виртуальным DOM
  • легкий
  • отзывчивые компоненты
  • Рендеринг на стороне сервера
  • Простая интеграция инструментов маршрутизации, пакетов и инструментов управления состоянием
  • Отличная поддержка и сообщество

Краткое сравнение

Функции VUE React
ссылка на компонент Делится на глобальную регистрацию и локальную регистрацию. Импортируя соответствующий компонент, а затем ссылаясь на него в шаблоне.
поток данных 1. Родительский компонент обновляет представление дочернего компонента, передавая реквизиты, явно вызывая параметр props для объявления данных, которые он ожидает получить.
2. Vue — это переменная данных, двусторонняя привязка, декларативное написание, а миксин во многих случаях используется для горизонтального разделения компонентов Vue.		 1. Официально рекомендуется, чтобы пропсы были похожи на чистые функции, с согласованным вводом и выводом, и не рекомендуется менять представления через пропсы.
2. Общая идея реакции функциональна, поэтому рекомендуются чистые компоненты, данные неизменяемы, и односторонний поток данных.Конечно, это можно сделать и в двусторонних местах.Например в сочетании с редуксом -form, горизонтальное разделение компонентов обычно осуществляется через компоненты более высокого порядка.
трафарет Комбинируйте html, css и js вместе и используйте их собственные методы обработки.Vue имеет однофайловый компонент, который может записывать html, css и js в один файл, а html предоставляет механизм шаблонов для его обработки. Все на js, html генерируется через js, поэтому jsx проектируется, а css управляется через js, styled-component, js сообщества и т.д.
мероприятие 1. Каждый экземпляр Vue реализует интерфейс событий для облегчения связи между родительскими и дочерними компонентами.В небольших проектах нет необходимости внедрять механизм управления состоянием.
2. Добавленный синтаксический сахар, вычисляемый и наблюдающийся за Vue.		 1. Вы должны реализовать событие самостоятельно.
2. Используйте синтаксис JSX только для написания набора логики для достижения.
государственное управление 1. Объект состояния не нужен, данные управляются в объекте Vue с помощью атрибута данных.
2. Когда компоненты, не являющиеся родительско-дочерними, вложены слишком глубоко, управление состоянием может обратиться к vuex.		 1. Это ключевая концепция в реакции, она неизменна, в React вам нужно использовать метод setState() для обновления состояния.
2. Когда компоненты, не являющиеся родительско-дочерними, вложены слишком глубоко, управление состоянием может обратиться к react-redux.
поддерживать Поддерживается лично Ю Юйси, бывшим сотрудником Google. Поддерживается фейсбуком.
кривая обучения Кривая обучения плоская, и внутри инкапсулировано много синтаксического сахара. Немного более сложная кривая обучения и большая гибкость
Популярность Звезда Github 117604 по состоянию на 29 октября 2018 г. Звезда Github 114275 по состоянию на 29 октября 2018 г.
сцены, которые будут использоваться 1. Расширенная веб-страница;
2. Смешанная разработка приложения (weex с открытым исходным кодом Alibaba);
3. Разработка апплета WeChat (Meituan с открытым исходным кодом mpvue, Netease Koala с открытым исходным кодом megalo);
4. Разрабатывайте настольные программы с помощью электрона.		 1. Расширенные веб-страницы;
2. Гибридная разработка APP (реактивный исходный код facebook);
3. Апплет WeChat (таро Jingdong с открытым исходным кодом);
4. Его можно комбинировать с электронным для разработки настольных программ.
использовать компанию По неполной статистике, известные отечественные и иностранные компании, включая Ele.me, Suning.com, Meituan, Tmall, Laravel, htmlBurger и др., используют vue для разработки новых проектов и реконструкции фронтенда старых проектов. Ant Financial, Alibaba, Tencent, Baidu, Meituan, Didi, Ele.me, JD.com, NetEase и т. д.
экология пользовательского интерфейса 1. Сторона ПК: iview, element и т. д.;
2.h5 терминал: есть типа вант, минтуй и т.д.;
3. Смешанная разработка: weexui, bui-weex;
4. Апплет WeChat: iView Weapp, zanui;		 1. Сторона ПК: Ant Design, Material-UI и т. д.;
Сторона 2.h5: Ant Design Mobile, weui и т.д.;
3. Смешанная разработка: teaset, react-native-elements;
4. Апплет WeChat: iView Weapp, Taro UI;

Справочная документация

Категории