5 идей Vue.js, которые вы полюбите (даже если React вас полностью устраивает)

В основе любой популярной библиотеки лежит идея, которая отличает её от остальных. В Angular — это директивы и two-way data-binding, в React — компонентный подход, Virtual DOM, однонаправленный поток данных, SSR; Polymer приносит будущие web components в современные браузеры. Некоторые библиотеки делают упор на быстродействие, пытаясь выкинуть из популярных всю ненужную шелуху (Inferno, Preact), другие, по мнению их авторов, впитывают в себя самое лучшее из разных подходов. Vue.js как раз из последних.
Досконально изучать каждый не имеет смысла (и не хватит времени), но понимание идей, лежащих в основе популярных, поможет вам выбрать подходящий инструмент под ваши задачи.

Vue.js?

На что похож Vue при первом знакомстве?
Те, кто использовал React и Angular, сразу увидят много общего — компонентный подход, lifecycle методы, unidirectional data-flow c передачей props вниз по дереву, virtual DOM, директивы, vuex (redux-like), vue router. Такая схожесть, при наличии опыта работы с одной из библиотек, позволит вам быстро понять, почему многие выбирают именно Vue.

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

1. Реактивность

Реактивность — это когда данные внутри приложения напрямую связаны с данными в отображении и их изменение в любой части мгновенно влияет на перерисовку отображения.
Как реализуется реактивность в React? Кратко говоря, все данные, которые мы используем в приложении хранятся в state и props, при необходимости изменить данные, мы изменяем их через setState, дальше React определяет какие части приложения зависели от измененных данных и перерисовывает их.

В Vue.js применен похожий подход, однако он имеет одно принципиальное отличие — каждое поле входных данных приложения расширяется при помощи Object.defineProperty и разбивается на пары setter/getter. С их помощью Vue следит за тем, какие данные читались или изменялись и может конкретно определить, что влияет на отрисовку отображения.

Такой же ненавязчивой реактивности можно добиться и в React, переложив заботу о state на плечи MobX.

2. Вычисляемые свойства

В Vue существует несколько типов данных компонента:

• data — основные данные;
• props — данные, переданные из родительского компонента;
• computed — данные, которые могут быть вычислены на основе двух предыдущих.

Такое разделение концептов — простая, но удобная идея.
Последние имеют ряд преимуществ по сравнению с подходом в React:

1. Мы перестаем плодить вспомогательные методы вида getFullName() для компонент;
2. Они являются реактивными и при первом расчете, с помощью расширенных getter (принцип, описанный в первом пункте) собирают зависимости и знают наверняка, при изменении каких данных необходим перерасчет;
3. Являются ленивыми, т.е. считаются только когда за ними обращаются, а не при каждом изменении зависимых данных;
4. Кэшируются на основе входных данных.

Схожего поведения, при работе с большим объемом выборок в Redux, можно добиться с Reselect.

3. Встроенная FLIP-анимация

Идея удобного описания анимации во фреймворках далеко не новая (ng-animate, ReactCSSTransitionGroup). Но меня удивила FLIP-анимация прямо из коробки. Коротко говоря, это вид анимации перемещения элементов, когда вы сначала узнаете их итоговые позиции, а затем двигаете при помощи translate. В Vue такую анимацию можно получить всего парой строчек кода:

4. Компоненты и vue-loader

Vue рекомендует хранить весь код компонента (js, стили, шаблон) в одном файле — довольно непривычный подход. Не буду судить о том, насколько это удобно, особенно когда ваши компоненты далеко не атомарные.

Но есть любопытный момент — компоненты загружаются через vue-loader для webpack, который скрывает от вас сложность сборки, позволяя использовать любимые технологии прямо из коробки — ES6, coffeeScript, Sass, postCSS, CSS modules, jade (pug) и другие.

Никакой настройки, клево, да?

5. Слоты

Идея слотов пришла из Web Components и очень проста — если вам необходимо передать несколько компонент внутрь другого компонента, то вы можете обозначить места, где они будут отображаться. Такой подход позволяет делать сложные компоненты-обертки, которые легко абстрагируются от того, что происходит внутри. Вот так, например, можно сделать компонент layout с несколькими слотами:

Эти 5 «фишек» Vue, которые мне понравились — далеко не все, конечно. Со всеми его преимуществами и недостатками можно ознакомиться в документации (на русском), которая очень приятно написана. На GitHub есть список ресурсов о Vue с примерами приложений, статьями, howto. Надеюсь, какие-то из описанных идей вам понравились и вы сможете найти им применение в своих будущий проектах. Не бойтесь экспериментировать!

Если вы неплохо знаете JavaScript, используете React/Redux, PostCSS, Node.js и хотите работать на Пхукете, то обязательно посмотрите наши вакансии.