> Как мигрировать на Vue 3 с Composition API (Vue.js)

Короткий ответ

Миграция на Vue 3 с Composition API включает установку пакета vue@3, замену глобального API (например, Vue.mixin на app.mixin), переход на defineComponent и setup(). Composition API позволяет группировать логику по функциям вместо опций, улучшая переиспользование и типизацию. Для постепенной миграции используйте @vue/compat или плагин vue-router@4 и vuex@4. Ключевой trade-off - отказ от this в setup и замена lifecycle hooks на onMounted и аналоги.

Подробное объяснение

Миграция на Vue 3 с Composition API - это не просто обновление версии, а смена парадигмы организации кода. Основные изменения:

• Глобальный API: вместо new Vue() используйте createApp(). Все глобальные плагины и миксины регистрируются через app.use() и app.mixin().
• Composition API: логика выносится в setup() или отдельные composables. this внутри setup недоступен, вместо него - props, context и refs.
• Lifecycle hooks: created и beforeCreate заменяются на сам setup(), остальные - на onMounted, onUnmounted и т.д.
• Reactivity: Vue.observable заменён на reactive, ref и computed. this.someData становится someData.value для ref.
• TypeScript: Composition API лучше интегрируется с TypeScript, так как типы выводятся из возвращаемых значений.
• Фрагменты: компоненты могут иметь несколько корневых элементов без обёртки.

Для миграции используйте @vue/compat (режим совместимости) или обновляйте компоненты по одному. Плагины (vue-router, vuex) требуют версий 4.x.

На практике

Начните с аудита зависимостей: проверьте совместимость библиотек с Vue 3. Затем:

1. Установите vue@3 и обновите сборщик (Vite или webpack с vue-loader@17).
2. Замените new Vue() на createApp() в main.js.
3. Для каждого компонента решите: переписывать на Composition API или оставить Options API (Vue 3 поддерживает оба).
4. Для сложной логики создайте composables - функции, возвращающие реактивные данные и методы.
5. Замените $emit на emit из setup(props, { emit }), а $refs - на template refs через ref().

Пример кода

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

Сравните с Options API:

<script>
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}
</script>

Как отвечать на собеседовании

Начните с ключевых изменений: createApp, setup, ref/reactive. Подчеркните, что Composition API решает проблему "mixins hell" и улучшает переиспользование через composables. Упомяните, что миграция может быть постепенной - Vue 3 поддерживает Options API. Приведите пример типичной замены: mounted → onMounted, computed → computed(). Если спросят про сложности, скажите о необходимости обновления сторонних библиотек и изменении паттернов с this.

Что проверяет интервьюер

• Понимание разницы между Options и Composition API.
• Знание breaking changes: createApp, удаление $listeners, изменение v-model.
• Умение объяснить trade-off: Composition API сложнее для новичков, но лучше для масштабирования.
• Практический опыт: как обрабатывать provide/inject, watch, nextTick в новом API.
• Навык рефакторинга: как разбить большой компонент на composables.

Типичные ошибки

• Использование this внутри setup() - это приводит к undefined.
• Забывание .value при работе с ref в шаблоне (хотя в шаблоне это не нужно, но в JS-коде - обязательно).
• Попытка использовать Vue.observable вместо reactive.
• Необновление плагинов (vue-router@3 несовместим с Vue 3).
• Смешивание Options и Composition API в одном компоненте без понимания приоритетов (setup выполняется раньше data).