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>Счетчик: {{ count }}</p>
  <button @click="increment">+</button>
</template>

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

Особенности Options API

• Подходит для новичков
• Четко разделенные секции (data, methods, computed)
• Может быть сложным для масштабирования
• Вложенные структуры могут ухудшать читаемость

Composition API (Современный подход)

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

Пример Composition API

<template>
  <p>Счетчик: {{ 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 — более масштабируемый и удобный для крупных проектов.