Урок 01

Composition API: введение

Что такое Composition API

Composition API — способ организации логики компонента через функции композиции.

Появился в Vue 3. Альтернатива Options API.

Options API (старый)

<script>
export default {
    data() {
        return { count: 0 };
    },
    computed: {
        doubled() {
            return this.count * 2;
        },
    },
    methods: {
        increment() {
            this.count++;
        },
    },
    mounted() {
        console.log('Mounted');
    },
};
</script>

Проблема: логика размазана по data, computed, methods, mounted.

Composition API (новый)

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

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

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

onMounted(() => console.log('Mounted'));
</script>

Всё вместе. Логика в одном месте.

Почему Composition API

1. Логика вместе. Всё про счётчик — рядом. В Options API — размазано.

2. Переиспользование. Логика выносится в composables.

3. TypeScript. Лучшая поддержка, чем в Options API.

4. Большие компоненты. Когда 20+ полей, Composition API читаемее.

Основные функции

Реактивность:

  • ref() — значение
  • reactive() — объект
  • computed() — вычисление

Жизненный цикл:

  • onMounted()
  • onUnmounted()
  • onUpdated()

Зависимости:

  • provide() / inject()
  • watch() / watchEffect()

Структура script setup

<script setup>
// 1. Импорты
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 2. Props и emits
const props = defineProps({ title: String });
const emit = defineEmits(['save']);

// 3. Реактивные данные
const count = ref(0);
const user = ref(null);

// 4. Computed
const doubled = computed(() => count.value * 2);

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

// 6. Watch
watch(count, (val) => console.log(val));

// 7. Жизненный цикл
onMounted(() => {
    console.log('Ready');
});
</script>

Порядок — не обязательный, но так принято.

Options vs Composition

Options APIComposition API
Синтаксисdata, methodsФункции
ЛогикаРазмазанаВместе
ПереиспользованиеМиксиныComposables
TypeScriptСлабоОтлично
Кривая обученияПрощеСложнее

Для новых проектов — Composition API.

Пример: счётчик

Options:

export default {
    data: () => ({ count: 0 }),
    computed: {
        doubled() { return this.count * 2; },
    },
    methods: {
        inc() { this.count++; },
    },
};

Composition:

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

const count = ref(0);
const doubled = computed(() => count.value * 2);
function inc() { count.value++; }
</script>

Жизненный цикл

В Composition API — через onXxx:

import { onMounted, onUnmounted, onUpdated } from 'vue';

onMounted(() => console.log('mounted'));
onUnmounted(() => console.log('unmounted'));

Работает только в setup или script setup.

Реактивность

ref — примитивы:

const count = ref(0);
const name = ref('Иван');

reactive — объекты:

const user = reactive({ name: 'Иван', age: 25 });

Правило: используй ref — универсальнее.

Composables

Composable — функция, использующая Composition API:

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter() {
    const count = ref(0);
    const increment = () => count.value++;
    const reset = () => count.value = 0;

    return { count, increment, reset };
}

Использование:

<script setup>
import { useCounter } from '@/composables/useCounter';

const { count, increment, reset } = useCounter();
</script>

Переиспользование логики между компонентами.

Итог

  • Composition API — функции вместо опций
  • <script setup> — современный синтаксис
  • Логика вместе — читаемее
  • Composables — переиспользование

Дальше — реактивность: ref и reactive.