Options API та composition API

Vue.js пропонує два способи написання компонентів: Options API та Composition API.

Options API (Класичний підхід, використовує data, methods, computed, watch).
Composition API (Більш гнучкий, використовує setup(), ref(), reactive(), computed(), watch()).

Options API (Традиційний підхід)

У Options API код організовано як об'єкт з опціями:

data — дані
methods — методи
computed — обчислювальні пропси
watch — спостерігачі
mounted, created — хуки життєвого циклу

Приклад Options API

<template>
  <p>Counter: {{ count }}</p>
  <button @click="increment">+</button>
</template>

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

Особливості Options API

Підходить для початківців
Чітко розділені секції (дані, методи, обчислення)
Може бути складним для масштабування
Вкладені структури можуть погіршувати читабельність

Composition API (Сучасний підхід)

Composition API дозволяє писати код всередині setup(), використовуючи ref(), reactive(), computed(), watch.

Приклад Composition API

<template>
  <p>Counter: {{ count }}</p>
  <button @click="increment">+</button>
</template>

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

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

Особливості Composition API

Гнучкість (можна розділити логіку на функції)
Код чистіший і простіший
Легше повторно використовувати логіку (через Composable функції)
Потребує звикання

Коли використовувати?

Критерій	Options API	Composition API
Простенькі компоненти	Так	Так
Великі проекти	Може бути складним	Гнучкий
Повторно використовувана логіка	Важко	Зручно
Продуктивність	Швидко	Швидко
Підтримка Vue 2	Так	Тільки через `@vue/composition-api`

Резюме

Options API підходить для простих компонентів і початківців.
Composition API — більш масштабований і зручний для великих проектів.

Зміст

Options API (Традиційний підхід)Options API ПрикладOptions API ОсобливостіComposition API (Сучасний підхід)Composition API ПрикладComposition API ОсобливостіКоли використовувати?Резюме

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань