Vue 3: Композиция vs Опции – что выбрать?

Главная » Vue 3: Композиция vs Опции – что выбрать?

Сравнение Composition API и Options API, плюсы и минусы + пример миграции

С выходом Vue 3 появился Composition API – новый способ организации кода компонентов. Но Options API никуда не делся. Какой подход выбрать? Давайте разберёмся!

1. Options API vs Composition API – в чём разница?

🔹 Options API (классический стиль Vue 2)

Компонент строится на основе опций: data, methods, computed, watch, lifecycle hooks.

Пример:

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  mounted() {
    console.log('Компонент создан!');
  },
};
</script>

Плюсы:
✅ Простота для новичков (логика разбита по секциям).
✅ Удобен для небольших компонентов.

Минусы:
❌ При увеличении сложности код становится запутанным.
❌ Логика размазана по разным блокам (data, methods).

🔹 Composition API (современный стиль Vue 3)

Логика компонента описывается в функции setup(), а данные и методы объявляются с помощью ref, reactive, computed.

Пример:

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

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

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

onMounted(() => {
  console.log('Компонент создан!');
});
</script>

Плюсы:
✅ Гибкость – логику можно выносить в хуки и отдельные функции.
✅ Лучшая типизация (TypeScript).
✅ Удобство переиспользования кода (composables).

Минусы:
❌ Крутая кривая обучения для новичков.
❌ Требует дисциплины в организации кода.

2. Когда что использовать?

Выбирайте Options API, если:

Вы только начинаете изучать Vue.
Компонент простой (менее 100 строк кода).
Работаете с Legacy-кодом на Vue 2.

Выбирайте Composition API, если:

Компонент сложный (много логики).
Нужна типизация (TypeScript).
Хотите переиспользовать код через composables.

3. Пример перевода компонента из Options API в Composition API

Исходный код (Options API)

<script>
export default {
  data() {
    return {
      count: 0,
      user: { name: 'Alex', age: 25 },
    };
  },
  computed: {
    isAdult() {
      return this.user.age >= 18;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
    updateUser(newName) {
      this.user.name = newName;
    },
  },
  mounted() {
    console.log('Компонент загружен');
  },
};
</script>

Перевод в Composition API

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// Данные (аналог data)
const count = ref(0);
const user = reactive({ name: 'Alex', age: 25 });

// Вычисляемые свойства (computed)
const isAdult = computed(() => user.age >= 18);

// Методы (methods)
function increment() {
  count.value++;
}

function updateUser(newName) {
  user.name = newName;
}

// Хуки жизненного цикла (mounted)
onMounted(() => {
  console.log('Компонент загружен');
});
</script>

Что изменилось?

data() → ref() / reactive()
computed → computed()
methods → обычные функции
mounted → onMounted()

Вывод

Options API – проще для новичков, но хуже масштабируется.
Composition API – мощнее, удобнее для TypeScript и сложных проектов.

Рекомендация:

Начинайте с Options API, если Vue в новинку.
Постепенно осваивайте Composition API для более сложных задач.

Попробуйте перевести пару своих компонентов и сравните удобство! 🚀

Что дальше?