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

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

1. Установите Vue 3 и обновите зависимости
   Замените vue на vue@3, а vue-template-compiler на @vue/compiler-sfc. Для совместимости с Vue 2 используйте @vue/compat (режим миграции).

2. Перепишите компоненты с Options API на Composition API
   Вместо data, methods, computed используйте setup() или <script setup>. Пример:

   <script setup>
   import { ref, computed } from 'vue'
   const count = ref(0)
   const double = computed(() => count.value * 2)
   const increment = () => count.value++
   </script>

3. Замените устаревшие API

   • $listeners и $attrs объединены в $attrs.

   • v-model теперь поддерживает несколько моделей через v-model:propName.

   • $on, $off, $once удалены - используйте внешние библиотеки (например, mitt).

   • filter удалён - замените на методы или computed.

4. Обновите роутер и Vuex

   • vue-router@4 с новым API (например, createRouter).

   • vuex@4 или переходите на Pinia (рекомендуется для Composition API).

5. Используйте композиции (composables)
   Выносите повторяемую логику в функции с ref/reactive - это ключевое преимущество Composition API.

6. Проверьте сторонние библиотеки
   Убедитесь, что они поддерживают Vue 3 (например, Vuetify 3, Element Plus).

7. Тестируйте
   Используйте @vue/test-utils@2 и обновите тесты, учитывая изменения в реактивности и рендеринге.

Постепенная миграция через @vue/compat позволит запустить старый код в Vue 3, но лучше сразу переписать ключевые компоненты. Composition API даёт более чистую архитектуру и лучшую переиспользуемость.