Часть I - Компоненты и экосистема

ПРИВЕТ. Эта статья не означает, что Vue «лучше», чем React, потому что (как вы увидите) они очень похожи. Решение о том, что «лучше», индивидуально для каждого проекта и команды.

Хорошо, это 2018 год, и вы готовы узнать о Vue. Вы прочитали Руководство по сравнению, установили vue-cli и, возможно, даже создали приложение для создания списка дел.

Но теперь пора заняться настоящей работой. Если вы пришли из React, у вас, вероятно, возникнет много вопросов о том, как выглядит хорошее приложение Vue. Я определенно ответил - мои основные вопросы: .vue файлы рекомендуются? Могу и должен ли я писать JSX? Как применить стили к компоненту?

Хорошая новость: Vue и React очень похожи. Как упоминалось в сравнительном руководстве, у них одинаковый вариант использования. Различия заключаются в небольших деталях реализации, а не в основных функциях, поэтому переход между ними относительно прост!

Компонентная архитектура

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

React.Component против Vue.component

И React, и Vue предлагают component метод, но они очень разные. Это связано с тем, что React определяет компоненты как классы, а Vue определяет компоненты как объекты.

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

Распространенным шаблоном в React является создание подкласса React.Component для всех ваших компонентов, а затем ссылка на них напрямую по имени класса в функции render.

Vue не имеет такой концепции - компоненты вообще не должны расширять Vue, они могут быть простыми объектами.

Итак, хотя и Vue, и React предлагают «компонентный» метод, они кардинально отличаются.

React JSX против шаблонов Vue

Технически Vue поддерживает JSX, а React технически поддерживает HTML. Но одно из основных различий заключается в том, в какие методы разметки они вкладывают средства, поэтому стоит сравнить их на основе наиболее часто используемых шаблонов.

Свойство render в React - это просто Javascript, поэтому все, что вам нужно сделать в шаблоне, такое же, как и в Javascript.

Vue полагается на шаблоны HTML, поэтому он включает несколько директив, которые абстрагируют эту функциональность. Эти директивы очень похожи по дизайну на AngularJS (фактически, почти такие же: v-if, v-for, v-show и т. Д.)

Компонентные методы

Многие из распространенных методов компонентов React однозначно соответствуют хукам жизненного цикла Vue.

  • constructor → created
  • componentWillMount → beforeMount
  • componentDidMount → mounted
  • componentWillUnmount → beforeDestroy
  • componentDidCatch → n/a
  • shouldComponentUpdate → n/a
  • setState → нет - просто установите свойство напрямую (см. « Управление состоянием и данными компонента » ниже)

Управление состоянием компонентов и данными

В React у вас есть state компонента. В Vue у вас есть data. По сути, это одно и то же.

Начальное состояние

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

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

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

В React вы обычно используете тернарный оператор для условного рендеринга контента. Vue вводит ключевое слово v-if, которое действует точно так же.

Итерация по элементам

Чтобы перебрать массив элементов в React, вы обычно map перебираете значения и возвращаете строку того, каким вы хотите видеть каждый «элемент». В Vue вы должны использовать v-for.

Динамическая визуализация определенного типа компонента

Фактически вы сделали бы одно и то же в обоих фреймворках: назначили объекту компоненты, которые следует использовать.

Единственное отличие: во Vue вместо присвоения переменной определенного значения вы должны использовать :is функциональность Vue.

Тег :is сообщает Vue, что элемент DOM, к которому он прикреплен, должен иметь любое имя компонента, переданное ему. Это невероятно полезно для таких случаев, как таблицы - для большего количества вариантов использования см. Документацию.

Экосистема

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

Вследствие своего возраста у Vue не так много поддерживаемых сообществом библиотек, как у React.

Если вам нужна маршрутизация, управление состоянием или загрузчик Webpack; вам следует просто использовать один из пакетов, перечисленных ниже.

Маршрутизация: vue-router

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

Загрузчик Webpack: vue-loader

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

В следующем выпуске этой серии мы рассмотрим любимую всеми тему: управление общими данными.

Вы можете следить за мной в Твиттере, чтобы узнать, когда выйдет эта статья.

Спасибо, что читаете блог Front-End Society!