Composition API во Vue 3 — плюсы, минусы и опыт использования

Зачем нужно новое API?

2:40 На Vue 2 можно делать всё, что угодно. Есть супер-замороченные интерфейсы, например CKEditor последней версии сделан на Vue. Есть дешборды, и online web applications, которые очень круто работают. Зачем радоваться новому API, если мы и так уже имеем всё?

Проблемы Options API

3:18 При проектировании сложных систем компоненты рано или поздно дорастают до некрасивого и неразборчивого состояния, потому что в существующем Options API сложно декомпозировать и отделять логику внутри компонента: логику представления от бизнес-логики и так далее.

3:50 Часто у компонентов должна быть общая логика, но текущие методы борьбы с copy-paste неэффективны. Есть mixin’ы, provide/inject, компоненты высшего порядка и некоторые другие инструменты, но у каждого из них есть значительные минусы. Компоненты высшего порядка усложняют читаемость и затрудняют понимание кода.

5:17 Блок функциональности для своей реализации может включать в себя и реактивные данные, и computed’ы, методы, вотчеры, чтобы работать. Эти куски кода разбросаны по компоненту, и когда нужно понять, что делает компонент, приходится искать по всему коду, что откуда вызывается, куда какие данные поступают. Это усложняет понимание компонента.

Как Composition API может решить эти проблемы?

6:00 Теперь можно взять кусок логики, взять относящиеся к нему реактивные данные, вотчеры, props, computed’ы, хуки, сгруппировать их внутри какой-то функции, то есть инкапсулировать их в какую-то функцию, и работать с ней вне контекста компонента. Такой функцией является новый хук setup().

7:04 Объяснение работы Composition API на примере HelloWorld.

Преимущества Composition API

9:07 Теперь всё, что требуется для реализации какого-то куска функциональности, можно отделить от компонента, а сам компонент разбить на несколько таких логических блоков, переиспользовать и так далее. В основе нового API два ключевых понятия — reactive() и ref(). reactive() — это некий аналог существующей опции data(), а ref() — это похожая функциональность, но для примитивов.

Сравнение Options API и Composition API на примере простой игры

11:25 Reactangular birds — это игра с механикой Angry Birds, где нужно птичкой-ректангуляром поразить Vue. Как устроен код игры на Options API.

14:07 Вся магия происходит внутри setup-функции, где вызывается useBird, useCatapult, useTarget, и происходит сам Composition. В этой setup-функции наши зависимости заданы явно. Это упрощает чтение кода.

18:03 Как выглядит отрефакторенный Reactangular birds на Composition API? Абсолютно точно так же, и работает так же.

18:30 Новое API позволяет декомпозировать логику в компонентах, разбивая её на отдельные setup-функции, что позволит не нарушать принцип единственной ответственности, не копипастить код и тестировать код в отрыве от контекста компонента. Куски кода между собой имеют явные зависимости, можно выкинуть миксины, provide/inject и все эти страшные вещи. Плюс благодаря самой природе функций они легко типизируются, и это тоже сильно облегчает разработку.

19:43 Сейчас можно попробовать Composition API во Vue 2 версии с помощью плагина. В будущем можно будет писать компоненты с использованием исключительно Composition API, и в компиляции поставить специальный флаг, чтобы Options API не включался в бандл.

20:44 Сравнение альтернатив хукам. Аналогичная функциональность есть во всех современных компонентных фреймворках, и core team нигде не скрывает, что они вдохновлялись React Hooks. Во Vue Composition API хуки в среднем будут обрабатываться быстрее, чем хуки React-а, потому что во Vue они запускаются единственный раз во время инициализации, а в React — каждый раз при рендеринге. Плюс во Vue можно просто писать computed’ы, в React же нужно указывать список зависимостей computed’а вручную.

Недостатки Composition API

22:41 Когда core team выпустили первую версию RFC про Composition API, сообщество разработчиков отреагировало неоднозначно. Многие думали, что выкинут Options API, придётся переучиваться, выкидывать весь свой старый код на помойку. Core team пообещали не убирать Options API из 3-й версии. То есть теперь будет две альтернативы — Options и Composition API. Другие люди были недовольны, что эта идея похожа на уже существующую в React.

24:58 Более существенные недостатки: будет непривычно использовать вместо data() новые врапперы — ref() и reactive() — и не забывать их использовать.

25:24 Появляются некоторые детали. Например, если мы деструктурируем реактивный объект, то мы получаем нереактивные данные. Для этого вводится новый хелпер — toRefs().

25:57 Setup-функция может обращаться к каким-то props’ам, но при этом она не декларирует в одном месте, какие props ей нужны.

26:23 Проблемы с терминологией, потому что раньше под ref’ами подразумевались ссылки на какой-то элемент в DOM. Новое понятие подразумевает под собой некоторый реактивный примитив, который в том числе может быть и ссылкой на элемент DOM.

27:00 В одном из комментариев член core team пишет, что скорее всего старое Options API, всё-таки уберут в 4-й версии, но скорее всего если коммьюнити захотят что-то оставить, core team прислушается и не будут так делать.

28:58 Важно дать фидбек по изменениям: посмотреть roadmap, зайти в репозиторий vue-next, там очень много открытых пулл-реквестов, и во Vue 3 многое ещё не готово. Каждый может поучаствовать. Только убедитесь, что пулл-реквест, который вы отправляете, решает какую-то новую проблему, потому по словам людей из core team, часто прилетают пулл-реквесты на одну и ту же фичу.

Что ещё интересного?

30:10 Большинство описанных проблем обещают смягчить или решить с помощью средств разработки. Vetur плагин для VS Code будет помогать с типизацией, Intellisense и новой системой реактивности.

30:54 Roadmap Vue 3. Релиз ждать в первом квартале 2020 года. Сроки не жесткие, если core team не будет успевать, то возьмут ещё время. Всё это можно мониторить онлайн.

Что почитать, чтобы разобраться в теме?

31:27 Сам RFC с фидбеком от сообщества, подробностями, кейсами, комментариями.

31:58 Тред 2018-го года в Twitter, где Эван описывает, как он пришёл к тому, что нужно взять Hook’и из React и адаптировать под Vue, с аргументацией, с хейтерами, с драмой.

32:42 Развёрнутый коммент от члена core team, где он собрал кучу критического фидбека и развёрнуто на него ответил.

Ответы на вопросы

33:48 Как Composition API будет работать с массивами?

34:58 Как можно будет находить, что благодаря деструктуризации попало в объект?

36:08 Система реактивности будет в Composition API, а в Options API тоже всё через прокси будет работать?

36:35 Как работать с npm-пакетами, которые построены на Options API?

37:12 Приходилось ли работать с Vue и TypeScript? Есть ли какое-то сравнение class-component-decorator-а и Composition API?

37:55 Насколько удобно будет дебажить код с Composition API?

39:22 Можно ли систему реактивности повесить на property класса?

39:50 Как вынуть property класса и отправить в шаблон? Сохранит ли Object.property свою реактивную сущность?