Если вы собираетесь перенести свои приложения на Vue3 или просто попробовать новый синтаксис Vue3, предстоящая тема поможет вам начать с большой уверенностью.

Прежде всего, почему это обновление важно?

Vue3 предлагает новую парадигму — › Composition API. Основное преимущество Composition API заключается в том, что он обеспечивает повторное использование чистой и эффективной логики в виде составных функций. Он устраняет все недостатки примесей, основной причиной является повторное использование механизма API опций. Более того, более гибкая организация кода. Многим пользователям нравится, что мы пишем организованный код по умолчанию с помощью Options API: все имеет свое место в зависимости от варианта, к которому он относится. Однако API Options накладывает серьезные ограничения, когда логика отдельного компонента превышает определенный порог сложности. Это ограничение особенно заметно в компонентах, которые имеют дело с несколькими логическими задачами, что мы видели из первых рук во многих рабочих приложениях Vue2.

Официальная документация: https://vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse

Короче говоря, Vue3 станет новым стандартом через несколько месяцев.

Некоторое время безопасно продолжать использовать Vue2, так как он продолжит получать обновления безопасности/исправление ошибок и т. д. до конца 2023 года. В настоящее время Vue2 перешел в режим обслуживания. Но разве это не прекрасная возможность для нас перенести любые текущие проекты, которые у нас могут быть?

Vite — это современный и невероятно быстрый инструмент для создания шаблонов и объединения проектов. Что ж, несмотря на то, что это одна из моих любимых тем, в статье о переносе компонентов с Vue2 на Vue3 я постараюсь быть кратким.

Vite – это новый инструмент для создания внешнего интерфейса, который значительно улучшает процесс разработки внешнего интерфейса. Его создал Эван Ю, сам автор Vue!

Официальная документация: https://vitejs.dev/guide/

Компонент Vue2 — API параметров

Я начну писать базовый компонент Vue2 Options API, а затем шаг за шагом перепишу его в Vue3 Composition API.

Вещи, о которых следует помнить и которые позже будут подвергнуты рефакторингу в Vue3:
1) Объявление дочернего компонента
2) Объявление асинхронного компонента
3) Объявление props, emits
4) Объявление реактивных данных, методов, вычисляемых, наблюдателей, генерации событий
5) Перехватчики жизненного цикла
6) Миксины

API композиции

Эта тема также заслуживает отдельной статьи, так как это важная функция Vue3.

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

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

Composition API — это встроенная функция Vue3, которая в настоящее время доступна для Vue2 через официально поддерживаемый плагин @vue/composition-api. В Vue3 он также в основном используется вместе с синтаксисом ‹script setup› в однофайловых компонентах (SFC).

Официальная документация: https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api

Vue3 с Composition API

Давайте возьмем каждую часть нашей эталонной ПФС и адаптируем ее шаг за шагом к этой новой парадигме.

Объявление реактивных данных

Реактивные данные объявляются с помощью помощников ref и reactive.

· ref может принимать примитивы (наиболее распространенные: Boolean , String и Number) как аргументы, так и объекты;

· reactive может принимать объекты в качестве аргументов.

Еще одно отличие состоит в том, что с ref() у него есть свойство .value, которое вы должны использовать для получения его содержимого, но с reactive() > вы можете получить к нему прямой доступ:

Полезная ссылка: Ref vs Reactive

Определить дочерние компоненты

Делая компонент доступным в шаблоне, он работает так же, как и в Vue2. См. ниже импорт. Для асинхронных компонентов в Vue3 setup() парадигма другая, вам нужно будет импортировать помощник из vue (defineAsyncComponent).

Вычисляемые свойства

Для вычисляемых свойств нам потребуется использовать другой импорт. Обратите внимание на отсутствие ключевого слова this внутри вычисляемой функции. Благодаря тому, как работает ‹настройка сценария›, он больше не нужен.

Наблюдатели

Watch helper принимает переменную и функцию обратного вызова. Помните, что просмотр сложных типов, таких как объекты, выполняется глубоко и может отрицательно сказаться на производительности. Вы можете просмотреть только одно свойство объекта, передав его в качестве второго параметра. Подробнее о новом помощнике по часам читайте в официальной документации.

Ключи жизненного цикла

Крючки жизненного цикла работают одинаково в Vue2 и Vue3, но с Composition API доступ к этим хукам жизненного цикла изменился следующим образом.

Перехватчики жизненного цикла beforeCreate() и created() не нужны, поскольку setup() заменяет их и выполняет те же функции. И важно, чтобы эти крючки жизненного цикла были импортированы перед их использованием. См. пример:

Методы

Как мы уже упоминали, каждая функция, объявленная в ‹настройке сценария›, будет доступна в шаблоне.

Генерация события

Чтобы сгенерировать событие, сначала нам нужно объявить его с помощью хелпера defineEmits, а затем использовать возвращаемое значение в качестве эмиттера.

Реквизит

Аналогичным образом можно определить свойства компонента. Все варианты проверки по-прежнему поддерживаются.

ПРИМЕЧАНИЕ.defineProps и defineEmits — это макросы компилятора, которые можно использовать только внутри <script setup>. Их не нужно ввозить.

Использование миксина

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

Импортируется и используется следующим образом:

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

Имя компонента

Не хватает крошечной детали. У нашего компонента есть имя, и объявить его в настройках скрипта невозможно. К счастью, в одном файле поддерживается несколько тегов script, что является решением согласно оригинальному RFC.

Шаблон Vue и SCSS/CSS

Никаких изменений не требуется для шаблона Vue и раздела стилей для компонента. Хорошая новость, не так ли? Давайте соберем все вместе, чтобы увидеть результат.

Компонент Vue3 — API композиции

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

Пока это все. Что вы думаете о Composition API? Является ли наш компонент более чистым и удобным в сопровождении? Оставьте комментарий, чтобы узнать ваше мнение.