Migration от Vue 2

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

Основные отличия Vue 3 от Vue 2

1. Композиционный API (Composition API) Vue 3 вводит Composition API как альтернативу Options API, позволяя лучше структурировать код и повторно использовать логику. Основные функции: setup(), ref(), reactive(), computed().

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ name: 'Vue' });
    const doubled = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, state, doubled, increment };
  }
}
  • ref() создаёт реактивную примитивную переменную.
  • reactive() создаёт реактивный объект.
  • computed() создаёт вычисляемое свойство.
  • setup() выполняется до монтирования компонента и обеспечивает доступ к реактивным данным.

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

Жизненный цикл Vue 3 отличается от Vue 2, особенно при использовании Composition API:

Vue 2 Vue 3 (Composition API)
beforeCreate setup()
created setup()
beforeMount onBeforeMount()
mounted onMounted()
beforeUpdate onBeforeUpdate()
updated onUpdated()
beforeDestroy onBeforeUnmount()
destroyed onUnmounted()

Пример использования новых хуков:

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Компонент смонтирован');
    });

    onUnmounted(() => {
      console.log('Компонент удалён');
    });
  }
}

3. Новый виртуальный DOM и производительность

Vue 3 использует полностью переписанный виртуальный DOM на базе Proxy, что обеспечивает:

  • Более быструю реактивность и отслеживание изменений.
  • Уменьшение накладных расходов при рендеринге больших списков.
  • Поддержку фрагментов и порталов (Teleport), что позволяет рендерить контент вне текущего DOM-дерева компонента.
<Teleport to="body">
  <div>Эта модалка рендерится в body</div>
</Teleport>

Совместимость и Deprecated API

Некоторые возможности Vue 2 были удалены или изменены:

  • this.$on, this.$off, this.$once заменены на Composition API с emits.
  • .sync модификатор для props теперь рекомендуется через явный v-model.
  • filters больше не поддерживаются — рекомендуется использовать вычисляемые свойства или методы.

Пример замены .sync на v-model:

<!-- Vue 2 -->
<child-component :value.sync="parentValue" />

<!-- Vue 3 -->
<child-component v-model="parentValue" />

Шаги миграции

1. Использование Vue 2.7 (Composition API backport) Vue 2.7 позволяет постепенно внедрять Composition API перед полной миграцией на Vue 3.

2. Проверка зависимостей Все сторонние библиотеки должны поддерживать Vue 3. Необходимо обновить версии и заменить устаревшие пакеты.

3. Исправление реактивности Особое внимание уделяется реактивным объектам и массивам. В Vue 3 массивы и объекты реагируют через Proxy, что может изменить поведение некоторых мутаций.

4. Адаптация шаблонов

  • Удаление filters и .sync.
  • Проверка слотов и scoped slots — синтаксис изменён.
  • Использование <script setup> для упрощения компонентов.

<script setup> и современный синтаксис

Vue 3 позволяет использовать компактный синтаксис компонентов:

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

const count = ref(0);
function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Преимущества:

  • Автоматический импорт реактивных переменных в шаблон.
  • Минимум boilerplate-кода.
  • Упрощённое использование Composition API.

Миграция Vuex и Vue Router

  • Vuex: Vue 3 совместим с Vuex 4. Структура модулей сохраняется, но рекомендуется проверять поддержку Composition API через useStore().
  • Vue Router: Vue Router 4 полностью поддерживает Composition API и новый синтаксис маршрутов с createRouter() и createWebHistory().

Пример маршрутизатора:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

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

  • Vue Migration Helper: официальный инструмент для анализа кода на предмет несовместимых API.
  • Vue Devtools 6: поддерживает Vue 3 и позволяет отслеживать реактивные объекты, события и маршруты.

Практические рекомендации

  • Начинать миграцию с небольших компонентов, постепенно заменяя Options API на Composition API.
  • Использовать <script setup> там, где возможно, для упрощения структуры.
  • Тестировать каждую функциональность после обновления зависимостей и реактивного кода.
  • Вести документацию изменений в проекте для команды разработки.

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

Оглавление