Разработка полного приложения с использованием Vue 3 Composition API

Хотя мне очень нравится Vue.js 2, есть некоторые ограничения на то, как можно использовать повторно используемые компоненты и как должен быть выложен код. Это было одновременно и благословением, и проклятием. С одной стороны, для простых компонентов это делает изучение Vue очень простым и низким входным барьером. С другой стороны, по мере того, как компоненты становятся более сложными, вы обнаруживаете, что код для различных функций в одном компоненте искажается (это слово?).

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

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

Весь код на GitHub

Я разработал простое приложение для блога с двумя ветвями. Одна ветка использует API параметров Vue 2, а другая - API композиции Vue 3.

Https://github.com/simonjcarr/vue3_composition_api

Кривая обучения

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

Вот два фрагмента кода, оба из одного и того же компонента. Первый использует API Vue 2 Options, с которым вы будете знакомы, второй - новый Composition API.

Без API композиции

Тот же компонент, что и API композиции

API композиции не только значительно упрощает код, но и, как вы увидите в этой статье, код, импортируемый из @/composables/blog/posts, можно повторно использовать в других компонентах.

Обновите Vue CLI

Прежде чем мы создадим новое приложение, убедитесь, что у вас установлена последняя версия Vue CLI.

npm install -g @vue/cli

Создать новое приложение

vue create vue3_composition_api

При появлении запроса выберите Manually select features, затем используйте клавишу пробела для включения и выключения функций, пока у вас не будет такой же выбор, как я сделал ниже.

Когда закончите, нажмите Enter

Обязательно выберите Vue version 3.x (Preview) и нажмите Enter.

Остальные настройки должны быть такими

Использовать режим истории для роутера? Yes
Выберите желаемую версию линтинга, я использую ESLint + Prettier
Линт при сохранении
В выделенных файлах конфигурации
Сохранить это как пресет для будущих проектов? No

После завершения установки перейдите в папку приложения с

cd vue3_composition_api

Добавить попутный ветер CSS

В моем коде я использовал CSS попутного ветра. Установить с помощью Vue очень просто.

vue add tailwind

При появлении запроса выберите minimal

Запустите приложение

В терминале в корне вашего приложения

npm run serve

Vue запустится и сообщит вам, на каком порту работает ваше приложение, для меня это 8080

Откройте браузер и перейдите к http://localhost:8080

Вы можете заметить некоторые проблемы с форматированием, это не проблема, потому что попутный ветер конфликтует с некоторыми шаблонными CSS, сгенерированными базовым приложением Vue.

Удаление стандартного кода

Мы начнем с удаления некоторых шаблонных файлов и кода, созданного Vue.

Удалить HelloWorld.vue из /src/components/HelloWorld.vue
Удалить About.vue из /src/views/About.vue

Отредактируйте /src/App.vue, чтобы он содержал следующий код.

Отредактируйте /src/views/Home.vue, чтобы он содержал приведенный ниже код.

Отредактируйте /src/router/index.js, чтобы он содержал следующий код

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

Добавить заголовок

Создайте новый файл в /src/components/site/header/Header.vue (вам нужно будет создать папки site/header)

В Header.vue добавьте следующий код.

Теперь давайте скажем Vue использовать компонент Header и отобразить его.

Отредактируйте /src/App.vue, чтобы файл содержал следующий код.

В приведенном выше коде я импортировал компонент Header.vue и добавил его в параметр компонентов.

Я добавил в шаблон некоторую структуру HTML вместе с некоторыми классами CSS попутного ветра и, конечно же, добавил компонент <Header />.

Также обратите внимание, что я добавил :key="$route.fullPath" к элементу <router-view>. Это исправляет некоторые проблемы с реактивностью, когда Vue не узнает, что маршрут изменился, если единственное, что нужно изменить в URL-адресе, - это параметр. Мы будем использовать параметры URL для просмотра отдельных статей блога.

Если вы проверите свой браузер, теперь у вас должен быть заголовок и центральный раздел для основного контента сайта.

Компоненты сообщения в блоге

Последние 3 компонента, которые я создам, показаны ниже. Я перейду к контенту, как только мы создадим все файлы и приложение будет готово к использованию.

/src/components/blog/BlogRoll.vue
/src/components/blog/LatestPosts.vue
/src/components/blog/Post.vue

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

/src/components/blog/BlogRoll.vue

/src/components/blog/LatestPosts.vue

/src/components/blog/Post.vue

Все работает

Теперь давайте подключим эти компоненты к приложению.

Отредактируйте файл /src/views/Home.vue с помощью следующего кода.

В приведенном выше файле я импортировал компонент BlogRoll и отобразил его в шаблоне.

Отредактируйте /src/App.vue, чтобы он содержал следующий код.

Наконец, я добавлю новый маршрут, который позволит просматривать отдельные сообщения в блогах. Отредактируйте /src/router/index.js и обновите его, чтобы он содержал код, показанный ниже.

Если вы сейчас проверите свой браузер, все должно работать.

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

Компонент LatestPosts отображается в правой части страницы и показывает только последние 10 сообщений. Снова щелкните один из этих элементов, чтобы просмотреть сообщение полностью.

Резюме на данный момент

Приложение работает. Это очень просто, вы не можете создавать новые сообщения, вместо этого все сообщения берутся из https://jsonplaceholder.typicode.com/

Ключевым моментом является то, что каждый из 3 компонентов блога извлекает контент из jsonplaceholder. В случае BlogRoll и LatestPosts они оба извлекают один и тот же контент. Лучше сделать это из одного места.

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

Обновление приложения для использования Composition API

На высоком уровне процесс использования Composition API выглядит следующим образом.

Создайте файл javascript, называемый компонуемым, который экспортирует данные и методы, к которым ваши компоненты должны иметь доступ.
Импортируйте составной компонент в компонент и добавьте метод setup (), с помощью которого вы можете импортировать данные и методы, экспортированные компонентом.

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

Создайте составной файл.

создайте новый файл /src/composables/blog/posts.js и добавьте код, показанный ниже.

Давайте поговорим о некоторых ключевых моментах.

ссылка

ref используется для того, чтобы сделать переменные в API композиции реактивными. После импорта ref из Vue вы увидите, что я объявил 3 переменные, используя ref()

let post = ref({});
let posts = ref([]);
let user = ref({});

Делая переменную реактивной, ref преобразует ее в объект. Вы больше не обращаетесь к его значению напрямую, вместо этого вы используете .value, например, posts array можно получить через posts.value[0] или вы можете вставить элемент в его массив с помощью posts.value.push({title: 'Hello World'})

Есть и другие методы использования реактивности в API композиции Vue, вы можете прочитать о них здесь https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties

Все в одном месте

Ключевой вывод заключается в том, что все, что нам нужно для всех трех наших компонентов, теперь находится в этом одном файле. Мы можем поместить сюда столько логики, сколько нам нужно, но мы раскрываем только то, что нужно нашим компонентам. Это значительно упростит обслуживание нашего кода в будущем.

Далее мы увидим, как мы можем использовать этот составной файл путем рефакторинга компонента BlogRoll.

Рефакторинг BlogRoll.vue

Отредактируйте /src/components/blog/BlogRoll.vue и обновите его, как показано в приведенном ниже коде.

Раздел шаблона не изменился.

Добавлен новый setup() параметр, а предыдущие параметры data, methods и mounted удалены.

Основная концепция, которую следует отметить в отношении параметра setup(), заключается в том, что вы не можете использовать ключевое слово this внутри него, поскольку setup () запускается до того, как остальная часть компонента станет доступной. Однако вы можете использовать this для ссылки на переменные внутри настройки из любых других параметров в вашем компоненте, то есть из methods или mounted.

Вы увидите, что я запускаю onMounted внутри программы установки, это заменило параметр mounted, когда вы используете API композиции. Как видите, его тоже нужно импортировать import { onMounted } from "vue";

Первая строка кода внутри параметра setup() импортирует данные и методы, которые требуются этому компоненту из составного объекта.

const { posts, fetchPosts } = usePosts();

fetchPosts используется только в функции настройки, когда компонент установлен.

Наконец, единственный объект, требуемый template, становится доступным для компонента в последней строке.

return { posts }

Важное примечание: при обращении к переменным, экспортированным из составного объекта, вы получаете доступ к их значениям через .value. Вам не нужно делать это при интерполяции строк в шаблоне, Vue сделает это за вас. Например, чтобы использовать значение posts внутри параметра setup (), вам нужно будет использовать posts.value, но в шаблоне вы можете просто сослаться на 'posts'

Рефакторинг двух оставшихся компонентов

Отредактируйте /src/components/blog/LatestPosts.vue и добавьте следующий код

Наконец, отредактируйте /src/components/blog/Post.vue и добавьте следующий код.

После рефакторинга этих двух последних компонентов приложение все еще должно работать.

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

Резюме

Я объяснил некоторые преимущества нового Composition API, но вы можете узнать больше и быть в курсе любых обновлений на официальной странице документации Vue для Vue 3 https://v3.vuejs.org/guide/introduction.html

Мы создали полное приложение с использованием API параметров Vue 2 и преобразовали его для использования API композиции Vue 3.

Помните, что весь код этого приложения доступен на GitHub. Репо содержит две ветки, одна с приложением, разработанным с использованием Options API, а другая ветка с Composition API https://github.com/simonjcarr/vue3_composition_api

Надеюсь, вы нашли эту статью полезной. Дайте мне знать, понравилось ли вам это в комментариях ниже.

Разработка полного приложения с использованием Vue 3 Composition API