Разбираемся с API композиции Vue 3

Изучение нового способа структурирования компонентов в приложениях Vue

Вступление

Vue существует уже некоторое время. Он набирает огромную популярность в сообществе разработчиков и сумел привлечь внимание многих разработчиков, отвечающих / angular. Во многом это произошло благодаря абсолютно простым и интуитивно понятным API-интерфейсам компонентов, которые существуют во Vue. Однако с Vue 3 разработчики решили изменить (или ввести альтернативу) способ создания компонентов во Vue. Это API композиции.

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

Заявление об ограничении ответственности: это руководство предполагает предварительное знание JavaScript и VueJS. Если вы не знакомы с ними, я настоятельно рекомендую изучить их - они потрясающие!

Настройка нашего приложения

Вы можете клонировать исходный репозиторий кода отсюда. Я просто создал обычную страницу регистрации с полями username и password и кнопкой отправки, которая потенциально может выполнить вызов API для создания пользователя. Он также предоставляет пользователям возможность изменить язык с английского на испанский (Español). Все эти функции реализованы с помощью API параметров.

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

Все, что вызывает беспокойство, происходит в самом App.vue файле. Давайте посмотрим на это:

Мы создали два поля в data, которые соответствуют двум полям ввода в приложении; username и password. У нас также есть методы обновления для каждого из этих data полей; а именно updateUsername и updatePassword.

Примечание. Я знаю, что здесь можно было бы использовать v-modal, но идея этой статьи состоит в том, чтобы показать, насколько подробным может стать код при использовании API параметров.

У нас также есть свойство computed, dictionary, которое обновляет языковые строки на основе выбранного language.

После заполнения формы пользователь может нажать кнопку «Зарегистрироваться», которая вызывает метод submit в параметрах компонента. Эта функция обычно содержит некоторую бизнес-логику, соответствующую приложению, но на данный момент давайте просто вызовем API-интерфейс JSON-заполнителя и отобразим предупреждение, если все будет хорошо.

Эта проблема

Так что на первый взгляд этот код выглядит неплохо. Это то, с чем мы все знакомы / с которым удобно, и никогда нас не подводили.

Однако, если вы посмотрите на приложение с точки зрения «функций», вы заметите, что у нас есть signup функция. Несмотря на то, что они являются частью одной функции, большинство элементов, таких как поля data, обновление и отправка methods, являются частью разных параметров. По мере роста приложения и появления пары дополнительных функций в нашем App компоненте этот может становиться немного беспорядочным, потому что весь код, соответствующий данной функции, разбросан между различными параметрами компонента.

Создатели Vue осознали эту проблему, с которой сталкиваются некоторые довольно крупные проекты Vue, и предложили создать composition api, который решает эту проблему.

Примечание. Если вы знакомы с React, то простой API композиции - это версия хуков React для Vue.

Давайте использовать этот новый API в нашем приложении:

Использование Composition API

В новом API Vue позволяет нам создать только один option, а именно метод setup, который «настраивает» наш компонент. Они также предоставили нам «перехватчики» для встроенных функций, таких как data, computed и параметры метода жизненного цикла из старого API.
Чтобы лучше понять это, давайте проведем рефакторинг нашего текущего приложения для использования composition API.

Нам нужно сначала установить пакет api композиции и зарегистрировать его в нашем приложении:

yarn add @vue/composition-api

Зарегистрируйте этот плагин в своем main.js:

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

Давайте проведем рефакторинг 💪

Мы начнем наш рефакторинг с самого тривиального способа поддержания реактивности в приложениях Vue - атрибута data.

Во Vue у нас есть два варианта сохранения этого; ref и reactive. Обычно вы используете refs, когда вам нужно сделать одно примитивное значение, чтобы иметь реактивность. reactive можно использовать, когда у нас есть что-то вроде целого объекта для поддержания его реактивности. В нашем случае входные данные, которые мы используем, будут refs.

После рефакторинга файл App.vue должен выглядеть так:

Как видите, весь наш код теперь находится всего в одной setup функции. Мы использовали ref для поддержания реактивности клавиш username, password и language. Наши methods теперь просто стали обычными функциями, и мы использовали ловушку computed для оценки значения нашего dictionary на основе значения language.

Здесь следует отметить несколько моментов:
1. Мы избавились от всех «загадок» старого API опций. Нет this, теперь вы можете использовать стрелочные функции. Сейчас это чисто функциональное программирование.
2. Вы можете получить доступ только к тем вещам, которые вы «возвращаете» из своего setup метода в вашем шаблоне. Это делает вещи более удобочитаемыми.
3. Когда вы используете значение refs в шаблоне, достаточно простого имени; но в методе setup нам нужно использовать ref.value. Я считаю, что это то, над чем работает основная команда.
4. Все «части» функции, которые ранее были разбросаны по разным «параметрам», теперь могут быть размещены в одном месте. Отлично, правда ?!

Для людей, которые все еще не впечатлены, есть еще один шаг, который мы можем сделать отсюда. API композиции позволяет нам «составлять» различные функции, а затем использовать их в нашем компоненте.

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

Мы могли бы создать useLogin композиционную функцию для потока входа в систему и useLanguage для языковой функции:

Примечание. Здесь мы создаем две функции в одном файле, но в идеале вы должны создать их в отдельных файлах, предназначенных для каждой функции композиции; Таким образом, вы сможете разделить композиции между разными компонентами.

Как видите, функция setup теперь очень мала и удобочитаема. Таким образом, вы можете извлекать крошечные функции как функции композиции и составлять их вместе в различных комбинациях в разных компонентах !!

Подводя итоги

Что ж, мы увидели, как работает API композиции, и увидели несколько способов его реализации. Пришло время обсудить, какую пользу это принесло:

1. Мы пишем код более функционально. Это стиль, который предписывает Javascript. Такой код проще разбить на модули и повторно использовать. Например, наша функция useLanguage может использоваться в нескольких компонентах, требующих такого перевода.
2. В предыдущем API опций код упорядочен по функциям (данные, методы и т. Д.), А не по функциям (например, логин и язык). Это было прекрасно при разработке простых компонентов. Но по мере роста компонента отслеживание всех частей функции становилось сложной задачей. Функциональное разделение проблем, обеспечиваемое API композиции, делает код более читабельным.
3. Модульное тестирование (еще одно сообщение в блоге об этом в ближайшее время?) Эти новые функции композиции становятся проще простого, потому что, как упоминалось ранее, они забирают большую часть эзотерических частей предыдущего API. Нет больше this и этого 😂

Я надеюсь, что эта статья послужила хорошим ориентиром для нового API композиции и вдохновила вас на Vue 3.

Напишите мне в twitter или оставьте свои предложения / мнения в комментариях ниже 👇

Ура ☕️

Собирайте компоненты Vue из любой кодовой базы в общую коллекцию

Используйте Bit » ( Github ), чтобы собрать компоненты Vue из вашего проекта и поделиться ими с коллекцией в bit.dev . Позвольте вам и вашей команде повторно использовать компоненты в нескольких проектах, чтобы ускорить разработку и сохранить согласованный дизайн.