Какие знаешь несовместимости при переходе с Vuе 2 на Vue 3?

Несовместимости при переходе с Vue 2 на Vue 3

Переход с Vue 2 на Vue 3 — это значительное обновление, которое приносит множество улучшений, но также и ряд критических изменений, требующих внимания при миграции. Основные несовместимости затрагивают API, поведение компонентов, экосистему и рендеринг.

1. Изменения в API и архитектуре

Composition API — это новая парадигма, которая не заменяет, но сосуществует с Options API. Однако, если вы решите переписать компоненты, это потребует значительных усилий. Также удалены или изменены некоторые API:

• Удаление фильтров (filters): В Vue 3 фильтры удалены из ядра. Их нужно заменять на вычисляемые свойства или методы.

  <!-- Vue 2 -->
  <template>
    <div>{{ message | uppercase }}</div>
  </template>
  
  <!-- Vue 3 -->
  <template>
    <div>{{ uppercaseMessage }}</div>
  </template>
  <script>
  export default {
    computed: {
      uppercaseMessage() {
        return this.message.toUpperCase();
      }
    }
  }
  </script>
  

• Изменение API глобальных методов: Методы типа Vue.extend, Vue.nextTick и Vue.set теперь доступны через именованный экспорт из пакета vue.

  // Vue 2
  import Vue from 'vue';
  Vue.nextTick(() => {});
  
  // Vue 3
  import { nextTick } from 'vue';
  nextTick(() => {});
  

2. Изменения в модели компонентов

• Модель компонента v-model: В Vue 3 v-model был переработан. Теперь вместо value и input используются modelValue и update:modelValue. Также поддерживаются множественные v-model на одном компоненте.

  <!-- Vue 2 -->
  <ChildComponent v-model="pageTitle" />
  <!-- Эквивалентно -->
  <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
  
  <!-- Vue 3 -->
  <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
  

• Изменение события $listeners и атрибутов $attrs: В Vue 3 $listeners объединены с $attrs, что упрощает передачу атрибутов, но требует обновления логики в компонентах, которые их активно использовали.

3. Изменения в рендеринге и реактивности

• Реактивность на основе Proxy: Vue 3 использует Proxy вместо Object.defineProperty для реактивности. Это улучшает производительность, но приводит к несовместимостям с некоторыми типами данных:

  • Массивы: Прямое присвоение по индексу (например, array[0] = value) теперь реактивно, но методы типа set из Vue.set больше не нужны.
  • Коллекции: Map и Set теперь полностью реактивны, но в Vue 2 они требовали обходных решений.

• Асинхронные компоненты: Синтаксис асинхронных компонентов изменён. Вместо функции, возвращающей Promise, используется defineAsyncComponent.

  // Vue 2
  const AsyncComponent = () => import('./Component.vue');
  
  // Vue 3
  import { defineAsyncComponent } from 'vue';
  const AsyncComponent = defineAsyncComponent(() => import('./Component.vue'));
  

4. Изменения в экосистеме и плагинах

Многие плагины и библиотеки экосистемы Vue (Vuex, Vue Router, UI-библиотеки) требуют обновления до версий, совместимых с Vue 3. Например:

• Vuex 4 совместим с Vue 3, но имеет изменения в API (например, создание хранилища через createStore).
• Vue Router 4 также переработан, с изменениями в навигационных хуках и API.

5. Ключевые моменты для миграции

Для облегчения перехода рекомендуется:

• Использовать официальный миграционный сборник Vue 3, который включает утилиты для автоматического обнаружения проблем.
• Поэтапно обновлять компоненты, начиная с наименее критичных.
• Тестировать производительность и совместимость в development-среде перед деплоем.
• Обращать внимание на браузерную поддержку: Vue 3 требует современных браузеров с поддержкой Proxy.

В целом, переход на Vue 3 требует планирования, но приносит выгоды в виде улучшенной производительности, Composition API и лучшей TypeScript-поддержки. Рекомендую тщательно изучить официальную документацию по миграции перед началом работ.