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

В этой статье вы узнаете, почему именно вам следует научиться использовать Composition API.

В настоящее время есть три ограничения, с которыми вы могли столкнуться при работе с Vue 2:

  • По мере того, как ваши компоненты становятся больше, удобочитаемость становится все труднее.
  • Все существующие шаблоны повторного использования кода имеют недостатки.
  • Vue 2 имеет ограниченную поддержку TypeScript из коробки.

Я подробно расскажу о первых двух, чтобы было понятно, какую проблему решает новый API.

Что такое API композиции?

Composition API — это набор API, который позволяет нам создавать компоненты Vue, используя импортированные функции вместо объявления параметров. Это общий термин, который охватывает следующие API:

  • API реактивности, например. ref() и reactive(), что позволяет нам напрямую создавать реактивное состояние, вычисляемое состояние и наблюдателей.
  • Крючки жизненного цикла, например. onMounted() и onUnmounted(), что позволяет нам программно подключиться к жизненному циклу компонента.
  • Внедрение зависимостей, то есть provide() и inject(), что позволяет нам использовать систему внедрения зависимостей Vue при использовании API реактивности.

Composition API — это встроенная функция Vue 3, которая в настоящее время доступна для Vue 2 через официально поддерживаемый плагин @vue/composition-api. В Vue 3 он также в основном используется вместе с синтаксисом <script setup> в однофайловых компонентах.

Почему Composition API?

  1. Большие компоненты сложно читать и обслуживать

Основное преимущество Composition API заключается в том, что он обеспечивает чистое и эффективное повторное использование логики в форме составных функций.

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

Вот тот же компонент до и после рефакторинга в Composition API:

Когда вы организуете компоненты по функциям с помощью API композиции, вы будете группировать функции в функции композиции, которые вызываются из вашего метода настройки, например:

Используя составной API, наши компоненты теперь могут быть организованы по логическим признакам (также известным как «функции»). Однако это не означает, что наш пользовательский интерфейс будет состоять из меньшего количества компонентов. Вы по-прежнему будете использовать хорошие шаблоны проектирования компонентов для организации своих приложений:

Теперь, когда вы увидели, как Component API позволяет сделать большие компоненты более удобными для чтения и сопровождения, мы можем перейти ко второму ограничению Vue 2.

2. Не существует идеального способа повторного использования логики между компонентами

API композиции Vue 3 предоставляет нам четвертый способ извлечения повторно используемого кода, который может выглядеть примерно так:

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

Хорошее

  • Мы пишем меньше кода, поэтому проще превратить функцию из вашего компонента в функцию.
  • Он основан на ваших существующих навыках, поскольку вы уже знакомы с функциями.
  • Это более гибко, чем Mixins и Scoped Slots, поскольку они просто функции.
  • Intellisense, автозаполнение и типизация уже работают в вашем редакторе кода.

Не очень хорошо

  • Требуется изучение нового низкоуровневого API для определения функций композиции.
  • Теперь есть два способа написания компонентов вместо стандартного синтаксиса.

Заключение

Composition API состоит из ряда различных внутренних компонентов Vue.js, доступных через служебные функции. Это помогает лучше организовать код компонента по логическому принципу и упрощает отделение логики компонента от шаблона компонента и даже повторное использование этой логики в нескольких компонентах. Наконец, он обеспечивает лучшую поддержку Typescript для Vue.js.

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