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

Новая опция компонента setup выполняется перед созданием компонента, сразу после разрешения входных параметров props, и служит точкой старта для Composition API

Опция setup должна быть функцией, которая принимает аргументами props и context (о которых подробнее поговорим дальше). Кроме того, всё что возвращается из функции setup будет доступно для остальных частей компонента (вычисляемых свойств, методов, хуков жизненного цикла и т.д.), а также в шаблоне компонента.

Добавим setup в компонент

Во Vue 3 теперь можно сделать реактивную переменную где угодно с помощью новой функции ref

ref принимает аргумент и возвращает его обёрнутым в объект со свойством value, которое затем можно использовать для чтения или изменения значения реактивной переменной

Оборачивание значения в объект может показаться лишним, но это нужно для одинакового поведения разных типов данных в JavaScript. Это связано с тем, что примитивные типы в JavaScript, такие как Number или String, передаются по значению, а не по ссылке

Наличие объекта-обёртки вокруг любого значения позволяет безопасно использовать его в любой части приложения, не беспокоясь о потере реактивности где-то по пути

Возвращаясь к примеру, создадим реактивную переменную repositories

Готово! Теперь каждый вызов getUserRepositories будет изменять repositories и обновлять вид блока, чтобы отобразить изменения

Несколько частей первого логического блока теперь переместились в метод setup и удобно располагаются рядом друг с другом. Остался вызов getUserRepositories в хуке mounted и метод-наблюдатель, отслеживающий изменения входного параметра user

Для паритета возможностей между Composition API и Options API, также требовался способ использовать хуки жизненного цикла внутри setup. Это стало возможно благодаря новым функциям, экспортируемым Vue. Хуки жизненного цикла в Composition API именуются как и в Options API, но с префиксом on: т.е. mounted станет onMounted

Эти функции принимают аргументом коллбэк, который выполнится при вызове компонентом хука жизненного цикла. Добавим его в функцию setup

Осталось реализовать отслеживание изменений входного параметра user и реагирование на них. Для этого воспользуемся автономной функцией watch

Простой пример, чтобы понять как это работает

При каждом изменении counter, например после counter.value = 5, будет срабатывать наблюдатель и вызовется коллбэк (второй аргумент), который в данном случае выведет в консоль 'Новое значение counter: 5'

Эквивалент при использовании Options API

Вне компонента Vue, как ref или watch, также можно создавать вычисляемые свойства с помощью функции computed, импортированной из Vue. Вернёмся к примеру со счётчиком

Функция ,b>computed вернёт реактивную ссылку только для чтения с результатом коллбэка, который был передан первым аргументом в computed. Для доступа к значению такого вычисляемого свойства, нужно обращаться к свойству .value, как и в случае с ref

Перенесём функциональность поиска в setup

Можно продолжать делать аналогичное и для других логических блоков, но возможно уже раздаётся вопрос — Разве это не перемещение кода в опцию setup, что теперь сделает её гигантской? Что ж, это не так. Поэтому, прежде чем продолжить, вынесем приведённый код выше в автономную функцию композиции. Начнём с создания useUserRepositories.js

Функциональность поиска вынесем в собственную функцию композиции

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

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

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