В этой статье будет показано, как Vue Composition API — отличный способ сделать ваш код более читабельным и удобным в сопровождении. В качестве альтернативы API параметров API композиции, представленный в Vue 3, более доступно обрабатывает методы и состояние компонентов.
Composition API — это новый (и необязательный) способ создания и организации компонентов в приложении Vue 3. Это позволяет более интуитивно определять логику реактивного компонента, позволяя сгруппировать весь код для конкретной функции (например, поиска). Использование Vue Composition API сделает ваше приложение более масштабируемым и пригодным для повторного использования между несколькими компонентами.
В этой статье мы создадим простое приложение «Список покупок» с помощью Vue Composition API.
Приложение со списком покупок с Vue Composition API
Вы можете посмотреть живую демонстрацию приложения, которое мы создаем.
Предпосылки
Для этого урока вам понадобятся:
базовое понимание HTML, CSS, JavaScript и Vue
текстовый редактор
Node.js
представление командной строки
Настройка приложения Vue
Теперь начнем с установки Vue Cli:
npm install -g
Эта команда установит Vue глобально.
Мы будем использовать Vue CLI для создания простого приложения. Для этого откройте терминал и введите следующее:
vue create vueshoppinglist
После установки перейдите в папку с помощью cd vueshoppinglistи запустите npm run serve.
Ваша новая установка Vue готова
Это запускает сервер разработки, который позволяет вам просматривать ваше приложение на localhost:8080.
Пришло время настроить хороший проект Vue.
API композиции Vue
Чтобы установить Composition API из корня вашего проекта, выполните следующее:
npm install —save @vue/
После успешной установки мы импортируем его в наш проект.
Измените src/main.vue, чтобы зарегистрировать Composition API глобально в нашем приложении, чтобы мы могли использовать его во всех компонентах нашего приложения:
Создание пользовательского интерфейса
Нам понадобится компонент, в котором будет размещаться пользовательский интерфейс нашего приложения. Создайте новый ShoppingList.vueкомпонент в src/components/каталоге и вставьте в файл следующее:
Приведенный выше фрагмент кода является исходным шаблоном нашего пользовательского интерфейса. Теперь мы импортируем наш новый компонент ShoppingList.vue, App.vueкак показано ниже:
Состояние здесь привязано к ItemListфункции. Мы определяем наше inputсостояние, которое мы будем привязывать к нашему полю ввода, а также определяем наш Itemsмассив, который будет содержать все наши файлы Items.
Определим нашу addItemфункцию:
Важно, чтобы все, к чему мы хотим получить доступ из шаблона, возвращалось какitemList методами, так и setup (). В конце фрагмента кода мы возвращаем состояние или метод.
Наше приложение со списком покупок завершено:
Приложение для покупок готово к работе
Вывод
Наконец, мы создали наше приложение «Список покупок» с помощью Vue 3 Composition API. Интересно посмотреть, как Composition API используется в Vue 2. Одним из его ключевых преимуществ, которые я заметил, является обработка методов, а состояние компонента становится более доступным, а также его реактивность.
Надеюсь, вы узнали
