Как мигрировать на Vue 3 с Composition API

Что проверяют

Различаете ли вы две задачи: переезд с Vue 2 на Vue 3 и перевод компонентов на Composition API. Интервьюер хочет услышать план, при котором продукт не встаёт на месяц, и следом спрашивает, что делать с Vuex, UI-китом и глобальным event bus.

Как отвечать

Сразу скажите, что Composition API в Vue 3 не обязателен: Options API поддерживается полностью, переписывать все компоненты в день миграции не нужно. Разумный порядок:

• Vue 2.7 как ступенька: в ней уже есть ref, computed и <script setup>, так что новый код пишут в новом стиле ещё до смены мажорной версии;
• инвентаризация зависимостей: главный блокер обычно UI-кит и плагины. Element UI меняется на Element Plus, Vuetify 2 на Vuetify 3, Vuex на Pinia (официальная рекомендация), Vue Router 3 на 4. Сборку заодно переводят с Vue CLI на Vite;
• сборка совместимости @vue/compat: приложение запускается на Vue 3 и выдаёт предупреждение на каждое устаревшее место. Их закрывают по одному, в конце compat убирают;
• ломающие изменения: new Vue() становится createApp, Vue.use и Vue.component вешаются на экземпляр приложения, фильтры и $on/$off удалены, v-model у компонента работает через modelValue и update:modelValue, .sync заменён на v-model:prop, beforeDestroy стал beforeUnmount, $listeners слился с $attrs, у v-if теперь приоритет выше, чем у v-for;
• Composition API постепенно: сначала туда, где Options API мешал. Общая логика из миксинов уходит в composable-функции useXxx.

Тесты переводят на Vue Test Utils 2, часто вместе с переходом на Vitest.

Где спотыкаются

Советуют npm install vue@next. Тег next был актуален до релиза, Vue 3 давно версия по умолчанию, а поддержка Vue 2 закончилась в конце 2023 года.

Путают ref и reactive: деструктурируют reactive-объект и теряют реактивность или забывают .value в скрипте. Про toRefs и storeToRefs в Pinia стоит знать заранее.

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