Vue 3 Composition API: туториал для начинающих

Composition API в Vue 3 — это современный способ писать логику компонентов. Если раньше во Vue чаще использовали data, methods, computed, то теперь связанную логику удобно группировать в одном месте через функцию setup(). Это делает код чище, проще для поддержки и масштабирования. 🚀

Зачем нужен Composition API

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

С чего начать

Базовая идея — использовать реактивные переменные и функции внутри setup() или синтаксиса <script setup>.

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

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

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Счётчик: {{ count }}</button>
  <p>Удвоенное значение: {{ double }}</p>
</template>

Что здесь происходит

• ref() создаёт реактивное значение
• доступ к значению в JS идёт через .value
• computed() создаёт вычисляемое свойство
• в шаблоне .value писать не нужно

ref и reactive: в чём разница

ref подходит для примитивов: числа, строки, булевы значения.
reactive чаще используют для объектов.

import { reactive } from 'vue'

const user = reactive({
  name: 'Alex',
  age: 25
})

Если нужно хранить объект, часто можно использовать и ref, и reactive, но новичкам проще запомнить правило:

• ref — для простого значения
• reactive — для объекта

Как отслеживать изменения

Для реакции на изменения используют watch и watchEffect. 👀

import { ref, watch } from 'vue'

const search = ref('')

watch(search, (newValue, oldValue) => {
  console.log('Изменилось:', oldValue, '→', newValue)
})

watch удобен, когда важно контролировать конкретное значение.
watchEffect запускает эффект автоматически, если внутри есть реактивные зависимости.

Почему Composition API любят в IT-командах

• легче выносить логику в composables
• код проще тестировать
• удобнее сопровождать большие компоненты
• лучше читается бизнес-логика

Например, можно вынести логику авторизации, поиска или работы с API в отдельную функцию useAuth() или useSearch() и подключать её в разных компонентах. 🧩

Что важно запомнить новичку

• начинайте с <script setup> — это самый удобный формат
• не забывайте про .value в JavaScript
• используйте computed вместо ручных вычислений
• применяйте watch, когда нужно отследить изменение данных
• Composition API особенно раскрывается в реальных проектах

Composition API — не просто «новый синтаксис», а более гибкий подход к архитектуре Vue-приложений. Для начинающих это хороший вход в современную frontend-разработку и важный навык для работы с Vue 3. 💡

📚 В конце дня полезно держать под рукой качественные источники — загляните в подборку каналов про IT: там новости, практика, разборы инструментов и полезные гайды.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация