Шаблоны и Composition API во Vue 3 — основы реактивности и привязки данных

Vue 3 делает создание динамических интерфейсов невероятно простым и интуитивным. Благодаря мощной системе шаблонов и современному Composition API мы можем связать данные с HTML-разметкой и управлять поведением компонентов через JavaScript — всё в рамках одного декларативного подхода.

🧩 1. Что такое шаблоны Vue

Шаблон (template) — это разметка, которая описывает, как должны отображаться данные компонента.
Vue расширяет стандартный HTML, добавляя специальные директивы и выражения для реактивного связывания данных и управления DOM.

Пример простого шаблона:

<template>
  <h1>Привет, {{ name }}!</h1>
  <p>Сегодня {{ new Date().toLocaleDateString() }}</p>
</template>

<script setup>
const name = 'Vue-разработчик'
</script>

Здесь {{ name }} — это интерполяция, позволяющая динамически подставлять значения переменных прямо в HTML.

🧠 2. Связывание атрибутов с помощью `v-bind`

В HTML атрибуты обычно принимают только статические значения.
Во Vue мы можем сделать их реактивными, используя директиву v-bind или короткую запись ::

<template>
  <img :src="imageUrl" :alt="imageDescription" />
</template>

<script setup>
const imageUrl = 'https://vuejs.org/images/logo.png'
const imageDescription = 'Логотип Vue'
</script>

Когда значение переменной imageUrl изменится, Vue автоматически обновит атрибут src без перерисовки всей страницы.

⚙️ 3. JavaScript внутри шаблонов

Внутри {{ ... }} можно писать простые JS-выражения:
арифметику, обращения к методам, тернарные операторы и т.д.

<template>
  <p>{{ count * 2 }}</p>
  <p>{{ isActive ? 'Активно' : 'Неактивно' }}</p>
  <p>{{ message.toUpperCase() }}</p>
</template>

<script setup>
const count = 5
const isActive = true
const message = 'vue 3 — это круто!'
</script>

⚠️ Важно: внутри шаблона нельзя писать сложные выражения, циклы или объявления переменных — всё это нужно выносить в логику компонента.

🧬 4. Введение в Composition API

Composition API — это современный способ организации логики в компонентах Vue.
Он позволяет использовать реактивные переменные, вычисляемые свойства и жизненные циклы через функции, а не через объект data, methods, computed и т.д.

Пример базового компонента с Composition API:

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="increment">Счётчик: {{ count }}</button>
  </div>
</template>

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

const message = 'Добро пожаловать в Composition API'
const count = ref(0)

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

Здесь ref() создаёт реактивное значение, а Vue следит за его изменениями и обновляет интерфейс.
Такой подход делает код модульным, читаемым и удобным для повторного использования.

🧩 5. Почему это важно

Понимание принципов работы шаблонов и Composition API — ключ к созданию гибких, реактивных и масштабируемых приложений.
Это фундамент, на котором строятся:

управление состоянием;
маршрутизация;
работа с API;
и даже пользовательские хуки (composables).

💡 Заключение

Теперь вы знаете, как связывать данные с HTML, управлять атрибутами, использовать JavaScript в шаблонах и строить реактивные компоненты с помощью Composition API.
В следующей главе мы разберём реактивность и жизненный цикл компонентов Vue 3 — то, как Vue отслеживает изменения и обновляет интерфейс без вашего участия.

Шаблоны и реактивность: магия Vue 3 изнутри