Миграция с Vue 2 на Vue 3

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

  • Новый рендерер и виртуальный DOM: Vue 3 использует более быстрый виртуальный DOM с оптимизациями для уменьшения количества обновлений и повышения производительности.
  • Composition API: Дополнительно к Options API, появился новый способ организации логики компонентов через функции setup(). Это упрощает повторное использование кода и управление состоянием.
  • Фрагменты и порталы: Компоненты могут возвращать несколько корневых элементов без необходимости оборачивать их в один тег, а порталы позволяют рендерить элементы вне текущей иерархии DOM.
  • Teleport: Новый механизм для перемещения части DOM в другое место страницы без нарушения логики компонента.
  • Проактивная оптимизация реактивности: Vue 3 использует Proxy для отслеживания изменений данных, что устраняет ограничения Vue 2 с Object.defineProperty и улучшает поддержку массивов и вложенных объектов.

План миграции

  1. Обновление зависимостей Необходимо убедиться, что используемые библиотеки совместимы с Vue 3. Официальные пакеты Vue Router и Vuex имеют версии для Vue 3, но сторонние плагины нужно проверять отдельно.

  2. Проверка и обновление синтаксиса шаблонов

    • Атрибуты v-on.native больше не используются; события нужно назначать напрямую.
    • v-model теперь поддерживает синтаксис с указанием имени свойства: v-model:propName.
    • Директива v-bind.sync заменяется на v-model с именованными модификаторами.

  3. Переписывание компонентов с Options API на Composition API Основные шаги:

    • Создание функции setup() в компоненте.
    • Использование ref() и reactive() для реактивных данных.
    • Определение методов как функций внутри setup() и возврат их для использования в шаблоне.
    • Использование computed() и watch() для реактивных вычислений и наблюдателей.

    Пример изменения:

    Vue 2 (Options API)

    export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

    Vue 3 (Composition API)

    import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

Управление состоянием

  • Vuex: В Vue 3 используется Vuex 4, который полностью совместим с новым ядром. API остался прежним, но рекомендуется постепенно переходить к Composition API при интеграции с компонентами.
  • Pinia: Новый официальный инструмент управления состоянием, более легковесный и интегрированный с Composition API, позволяет создавать магазины как функции и использовать их напрямую в setup().

Работа с Vue Router

  • Синтаксис маршрутов остался схожим, но для Composition API используется useRouter() и useRoute() вместо this.$router и this.$route.
  • Динамическая маршрутизация стала проще благодаря возможности создания маршрутов с реактивными параметрами через Composition API.
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    const goHome = () => router.push('/');
    
    return { route, goHome };
  }
}

Работа с шаблонами и слотом

  • Фрагменты позволяют использовать несколько корневых элементов.
  • Slots API обновлен: теперь доступны именованные слоты с v-slot в едином стиле.
<template>
  <header>Заголовок</header>
  <main>
    <slot name="content"></slot>
  </main>
</template>
  • Scoped slots используют синтаксис <template v-slot:slotName="props">.

Совместимость с существующим кодом

  • Vue 3 предоставляет @vue/compat, специальную совместимую сборку для постепенной миграции. Она позволяет запускать большинство Vue 2 компонентов с минимальными изменениями, одновременно выявляя устаревшие API.
  • Для проверки кода используется vue-migration-helper, который подсвечивает проблемные места.

Примеры реактивности и нового API

  • Ref и reactive: ref создаёт реактивное примитивное значение. reactive создаёт реактивный объект или массив.
import { ref, reactive, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ items: [] });

    const double = computed(() => count.value * 2);

    watch(count, (newVal) => {
      console.log('Count изменился:', newVal);
    });

    return { count, state, double };
  }
}
  • WatchEffect позволяет автоматически отслеживать все реактивные зависимости в функции без явного указания источника.
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Текущее значение count: ${count.value}`);
});

Советы по миграции

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

Миграция с Vue 2 на Vue 3 требует тщательного планирования и понимания новых возможностей фреймворка. Использование Composition API и новых инструментов управления состоянием позволяет создавать более масштабируемые и поддерживаемые приложения.

Оглавление