Что такое composition api Vue. Зачем он нужен и какие преимущества.

Знакомство с Composition API

Друзья, хотел бы представить вам серию видео, которая будет в этом курсе, и в этом курсе мы с вами будем говорить о таком подходе создания Vue компонентов, который называется Composition API. 

Это совершенно иная философия создания Vue компонентов, и для того чтобы успешно её использовать, важно понимать принцип для чего всё это создавалось разработчиками и как это всё можно использовать? 

Именно поэтому в этом курсе особое внимание я уделяю теоретической части: для чего нужны эти компоненты и как их нужно использовать.

Итак, начиная с версии Vue 3, у нас есть возможность создавать компоненты двумя способами. Во-первых, это использовать стандартный способ - Options API, который у нас есть начиная с Vue 2. 

И, во-вторых, у нас появляется новый способ создания компонентов, который появился во Vue 3 - это такой способ, который называется Composition API.

В документации есть даже переключатель, как переключить документацию из одного режима в другой. 

Таким образом, наша схема, которую мы рассматривали в предыдущих курсах немного видоизменится. Если говорить о способах создания Vue компонентов, здесь у нас точно так же остаётся, что мы можем их создавать их с помощью Single File Components, либо с помощью JavaScript объектов, но теперь у нас появляется еще больше вариаций. 

Как мы можем создавать наши компоненты? 

Во-первых, мы можем, независимо от того, каким способом мы с вами создали компонент SFC либо JavaScript объекты, мы можем создать наш компонент с помощью подхода Options API и с помощью подхода Composition API. 

Кроме того, что мы можем создавать, используя либо Options, либо Composition, мы можем с вами использовать и смешанный подход. Но, обычно такое, конечно, не применяется. Как правило, для создания Vue компонентов используется либо то, либо другое решение. Нет смысла делать смешанный компонент, который работает и на Composition API. Тем не менее, нужно иметь в виду, что мы можем с вами создать такой даже смешанный компонент. 

Если у вас, например, есть какой-то компонент на Options API, вы можете его расширить в Composition и добавить туда какую-то поддержку Composition. Такая возможность тоже есть. У нас получатся смешанные компоненты. 

Причины появления Composition API

Composition API появился во Vue 3 из-за ограничений, которые были при подходе, который использовался для Options API. Далее мы будем подробно рассматривать, что же это за ограничения и что сподвигло разработчиков Vue создать совершенно иной способ создания Vue компонентов. 

Нужно понимать, что вот эти способы создания Vue компонентов они являются взаимно конвертируемыми. Компонент, который сделан на Options API, мы можем переписать на Composition API. Точно также компонент, который создан на Composition API, мы можем переписать на Options API. 

Какой-то старый проект можно спокойно переписать на Composition API и использовать его в своей работе, и точно также, если где-то в документации вы увидели подход Composition API, вы можете переписать его для своего старого проекта и использовать его в формате Options API. Всё это взаимно. 

Ну и главная проблема, почему всё-таки Vue 3 внедрил Composition API - это проблема поддержки больших компонентов. 

По мере того, как разрабатывались Vue приложения, приходилось иметь дело с большими компонентами, в которых достаточно много кода, и подход, который основывался на Options API, выявил очевидные недостатки этого подхода. 

Поддержка больших проектов с большим количеством кода, с большим количеством компонентов становится очень сложной. 

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

Если систематизировать все вот эти недостатки, которые есть в Options API, первый недостаток, который значительно усложняет нам поддержку больших компонентов, - это ограниченность опциями. 

Options API - это подход на опциях. У нас есть некий объект, в котором есть ключи, так называемые опции, например: components, props, data, created, method, computed, watch и так далее. 

Но, мы с вами ограничены этими опциями: методы мы должны писать в методах, computed мы должны писать в computed, уровень данных у нас должен быть отдельно, и мы не можем с вами взять и, например, какой-то ключ на уровне данных, какую-то переменную на уровне данных, взять и соединить с каким-то методом. У нас так не получится, потому что у нас есть четкая структура, которую мы должны с вами соблюдать.

Более подробно об этом недостатке мы с вами рассмотрим в отдельном видео, потому что это достаточно объемная тема, которую нужно будет рассмотреть.

Мы посмотрим на реальных примерах, почему опции действительно дают такое ограничение по композиции нашего компонента. 

И второй недостаток, который является по сути самым главным и самым существенным, почему появился Composition API, это то, что в Options API нет идеального способа для того, чтобы переиспользовать код между компонентами.

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

В итоге, ко всем плюсам, которые мы с вами перечислили для Composition API, у нас появляется ещё такие дополнительные плюсы, как лучшая поддержка TypeScript. 

То есть, подход Composition API позволяет нам более удобно работать с типизацией данных. Также мы получаем лучшую поддержку IDE редакторами.

Почему это происходит? Потому что мы с вами работаем с нашим компонентом практически, как с обычным JavaScript-файлом. 

Мы пишем просто обычные JavaScript-функции и соответственно вызываем их. В подходе Composition API у нас есть обычные JavaScript-функции, по сути, и обычные переменные, которые мы с вами можем использовать для уровня данных. 

Поэтому IDE-системам проще анализировать такие файлы. Построение компонентов, идёт как обычные JavaScript-файлы, которые мы можем соответственно соединять вместе воедино в единую систему. 

Ну и, как следствие, мы с вами получаем более высокую производительность за счёт внутренней оптимизации. Во Vue 3 оптимизировали этот подход, и производительность таких компонентов, которые созданы на основе Composition API, будет выше, чем у Options API. 

Вот такое вот вводное видео по поводу подхода Composition API. 

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