СТОП! Подождите минуту, прежде чем кричать, орать и оскорблять меня в комментариях, ха-ха.

«Еще одна статья, сравнивающая фреймворки / библиотеки» - да, разобраться.

Прежде чем я начну, поймите, это просто то, что я предпочитаю, а не самое лучшее.
Это обратная связь, но я вопрос ПОЧЕМУ будет скорее фактическим, чем эмоциональным.

Если вам нужен «краткий рассказ» - переходите к следующему полужирному заголовку

Во-первых, создатель Vue, Эван Ю, изначально был дизайнером (если я помню), он создал Vue для Интернета со всем, что это подразумевает: разметка (HTML + CSS).

С другой стороны, React был создан для решения архитектурных задач в компании (Facebook). Поэтому мне кажется, что он больше ориентирован на программное обеспечение, чем на веб, и это то, что мне не нравится в нем, потому что веб-интерфейс - это в первую очередь: HTML + CSS.

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

Я разделю то, что мне больше нравится, на 4 категории: Синтаксис, API, Инструменты, Обучение.

Синтаксис

Как было сказано ранее, Vue - это библиотека пользовательского интерфейса, созданная для Интернета, поэтому синтаксис довольно прост.

Шаблон

  • Vue: позволяет использовать HTML, JSX или createElement в функциях рендеринга.
  • React: позволяет использовать методы только JSX и React.createElement.

Веб-дизайнеры знают HTML и CSS, они вряд ли могут испортить шаблон Vue HTML, но они могут легко испортить шаблон JSX (циклы, троичный …).

Vue дает вам выбор, а React - нет, что печально для интерфейсной библиотеки.

Циклы и условные выражения

Подключиться к существующему проекту с разметкой

  • Vue: имеет компилятор шаблонов, может подключаться, как jQuery, к существующей DOM.
  • React: имеет только метод рендеринга, не может подключаться к существующей непустой модели DOM.

API

Теперь поговорим об API обеих библиотек.
Я считаю, что API Vue лучше готов к работе и требует меньше времени в использовании.
Кроме того, Vue не заставляет вас делать что-то одним способом, это дает вам выбор.

Формы обработки

Когда я использую библиотеку / фреймворк, я хочу избежать повторяющихся задач, контролируемые компоненты повторяются, потому что вам нужно: добавить слушателя к вашему элементу, обработать его значение, передать ему состояние, ввести его обратно к элементу…

Я ленив, хаха, мне это не нравится. В любом случае, если вам нравится контроль, Vue тоже может делать то же самое, но дает вам возможность ускорить разработку с помощью v-модели. .

Все зависит от продуктивности, но я не говорю, что «магия» всегда хороший выбор.

Компонентные реквизиты

  • Vue: вы можете определять и проверять реквизиты прямо из коробки
  • Реагировать: для этого вам нужна внешняя библиотека, я не понимаю, почему, поскольку свойства компонентов используются так часто (может быть, чтобы дать выбор?)

Обновление состояния

  • Vue: установите реактивные данные, затем просто измените их, Vue отслеживает изменения, обновляет только при необходимости (если данные были изменены и используются в шаблоне)
  • Реакция: вам нужно явно вызвать метод setState, ничего страшного, но…
    Вам нужно передать обратный вызов, чтобы использовать предыдущее состояние с новым состоянием…
    Компонент будет повторно визуализироваться, даже если данные о состоянии не изменились…

Сравнение рендеров (проверьте рендеры в консоли):
Vue - https://jsfiddle.net/darkylmnx/mq5f0txf/1/
React - https : //jsfiddle.net/darkylmnx/keupfgyr/1

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

Переходы и анимация

Спасибо (или нет) дизайнерам, но теперь на большинстве красивых веб-сайтов в Интернете полно анимации и переходов. Vue помогает вам справиться с этим "из коробки", и это действительно большое преимущество по сравнению с React IMO (которому нужна библиотека).

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

Коммуникация компонентов прямо из коробки

  • Vue: props (+ состояние подъема) parent-to-child, события child-to-parent
  • React: props (+ состояние подъема) родитель-ребенок

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

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

Кеширование

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

  • Вычисляемые свойства для кеширования данных
  • v-once для кеширования шаблонов (удобно для статических компонентов HTML)

Манипулирование DOM при необходимости (пользовательские директивы)

  • Vue: специальные директивы и ссылки
  • React: refs и все.

Иногда вы хотите манипулировать DOM для вещей, которые не имеют отношения к состоянию, например: предоставление автофокуса ввода.

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

Жаль, что у React нет эквивалента (например, автофокус)
https://stackoverflow.com/questions/28889826/react-set-focus-on-input-after-render
ИЛИ
https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom- элемент

Привязка условного атрибута класса

  • Vue: передайте ключ объекта (как класс) и значение (как логическое значение) для условного рендеринга HTML-классов.
    https://vuejs.org /v2/guide/class-and-style.html
  • React: обрабатывать это вручную (не сложно, но требует много времени).
    Для этого есть библиотека: https://github.com/JedWatson/classnames

Инструменты

Я коротко остановлюсь здесь:

  • SFC: Однофайловый компонент, лучшее, что когда-либо было создано для Интернета.
    CSS, JS и HTML в одном файле для одной задачи, больше не нужно переключать файлы.
  • Область видимости CSS: Все функции CSS, но ограничены компонентами (хлопать в ладоши).

Обучение

Vue действительно быстро учится, я помню, когда выучил его, я был в самолете, летевшем в Турцию в 2014 году, и мне потребовалось 2 часа, чтобы закончить курс. За несколько часов до этого я изучал React (оба взяты с laracasts.com), который мне было труднее переварить из-за синтаксиса JSX.

  • Vue: изучите API (директивы являются его частью, в конечном итоге директивы - это просто новые атрибуты HTML для изучения, а не новый язык)
  • Реагировать: изучить API, изучить JSX, новый «язык» (ничего страшного)

И JSX, и Vue директивы являются DSL, в конечном счете, они просто синтаксический сахар.

Заключение

Vue был создан для Интернета (анимация ...), и это то, что мне нравится в нем.
React был создан для пользовательского интерфейса в целом (благодаря виртуальному DOM), он упрощает использование на других платформах (мобильных, VR…).

Vue добавил виртуальную модель DOM с тех пор, как с такими проектами, как NativeScript, мы надеемся, что она будет адаптирована не для Интернета, а для других целей.

Как интерфейсный веб-разработчик, я предпочитаю Vue.
Как кроссплатформенный разработчик, я бы выбрал React (пока).

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

Спасибо за прочтение.

PS: Я также верю, что Китай будет править миром, поэтому я предпочитаю следовать тому, что Alibaba.com поддерживает хахахаха ✌️🇨🇳
PS 2: Если вы хотите научиться создавать сложные компоненты, проверить мой курс: «https://courses.maisonfutari.com/mastering-vue-components-creating-a-ui-library-from-scratch?coupon=MEDIUM

Скидка 50%, потому что вы читаете эту историю.