Перейти к основному содержимому

Vue — реактивность и Composition API

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Маршрут Vue​

ШагСтатья
1Первая программа
2Обзор
3Вы здесь
4Router и Pinia
5Production

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

Vue отслеживает зависимости и перерисовывает шаблон при изменении данных.

Composition API (<script setup>):

<script setup>

import { ref, computed } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">{{ count }} (×2 = {{ double }})</button>
</template>
APIКогда
refпримитивы и одно значение
reactiveобъект целиком
computedпроизводное значение
watch / watchEffectпобочные эффекты

В шаблоне ref разворачивается автоматически; в script — .value.

Однофайловый компонент (SFC)​

.vue файл:

<script setup>
defineProps({ title: String });
const emit = defineEmits(['save']);
</script>

<template>
  <h2>{{ title }}</h2>
  <button @click="emit('save')">Сохранить</button>
</template>

<style scoped>
h2 { color: var(--ifm-color-primary); }
</style>

scoped ограничивает стили компонентом.

Options API — устаревший стиль​

export default {
  data() { return { count: 0 }; },
  methods: { inc() { this.count++; } },
};

В новых проектах пишут на Composition API (<script setup>). Options API всё ещё встречается в старых кодовых базах.

Директивы​

ДирективаПример
v-if / v-elseусловие
v-forv-for="item in items" :key="item.id"
v-modelдвусторонняя привязка
v-on / @события
v-bind / :атрибуты

Связанные материалы​

Расширение темы​

Что важно понимать на практике​

Тема Composition API в Vue редко ограничивается только определением и одним примером. В реальной работе важно понимать контекст: зачем это нужно бизнесу, какие есть ограничения, и как решение ведет себя при росте нагрузки. Полезный ориентир: любой новый термин должен быть привязан к конкретному сценарию, где он приносит измеримую пользу.

Рабочий подход для новичка​

  1. Сначала собрать минимальный рабочий пример.
  2. Затем усложнить его: добавить негативный сценарий и обработку ошибок.
  3. После этого проверить читаемость и поддержку: понятные имена, единый стиль, комментарии только там, где без них трудно.
  4. В конце — зафиксировать выводы и правила, чтобы команда использовала один подход.

Типичные ошибки​

  • Слишком ранняя оптимизация до понимания базового сценария.
  • Смешение нескольких задач в одном большом модуле.
  • Отсутствие критериев качества, из-за чего решение сложно проверить.
  • Копирование кода без объяснения, почему выбран именно этот путь.

Мини-практика​

Возьмите небольшой фрагмент по теме Composition API в Vue и улучшите его в три шага: сначала сделайте рабочим, затем устойчивым к ошибкам, затем удобным для чтения другим разработчиком. Так формируется инженерное мышление: также "чтобы запускалось", но и "чтобы поддерживалось".

Как проверять качество результата​

  • Понимает ли другой человек решение без устных пояснений.
  • Есть ли пример входных данных и ожидаемый результат.
  • Очевидно ли, где расширять решение дальше.
  • Не нарушен ли единый стиль раздела и терминов.

Если эти пункты выполняются, материал становится полезным также для знакомства с темой, но и для ежедневной практики.

Дополнительный пример​

Контекст -> Решение -> Проверка -> Выводы

Такой шаблон можно применять почти к любой инженерной задаче: он помогает не терять логику и быстрее объяснять решение команде.

Углубление и сценарии применения​

Сценарий 1 базовый​

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

Сценарий 2 командная разработка​

Когда с материалом работает несколько человек, договоритесь о единых соглашениях: структура файлов, правила именования, формат примеров и критерии готовности. Это уменьшает число конфликтов и ускоряет ревью.

Сценарий 3 масштабирование​

При росте проекта полезно заранее определить границы модулей, точки расширения и ответственность между слоями. Даже простая диаграмма зависимостей помогает увидеть узкие места до того, как они станут проблемой в продакшене.

Антипаттерны​

  • Монолитный модуль без разделения ответственности.
  • Отсутствие тестовых примеров и проверяемых критериев результата.
  • Скрытые зависимости, о которых знает только автор.
  • Документация, которая не совпадает с текущей реализацией.

Что добавить в личный конспект​

  1. Короткое определение термина своими словами.
  2. Один рабочий пример с ожидаемым результатом.
  3. Два частых сбоя и способ их предотвращения.
  4. Мини-шпаргалку по проверке качества перед публикацией.

Так материал превращается из "прочитал и забыл" в инструмент, который можно использовать в работе и обучении.

Углубление и сценарии применения​

Сценарий 1 базовый​

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

Сценарий 2 командная разработка​

Когда с материалом работает несколько человек, договоритесь о единых соглашениях: структура файлов, правила именования, формат примеров и критерии готовности. Это уменьшает число конфликтов и ускоряет ревью.

Сценарий 3 масштабирование​

При росте проекта полезно заранее определить границы модулей, точки расширения и ответственность между слоями. Даже простая диаграмма зависимостей помогает увидеть узкие места до того, как они станут проблемой в продакшене.

Антипаттерны​

  • Монолитный модуль без разделения ответственности.
  • Отсутствие тестовых примеров и проверяемых критериев результата.
  • Скрытые зависимости, о которых знает только автор.
  • Документация, которая не совпадает с текущей реализацией.

Что добавить в личный конспект​

  1. Короткое определение термина своими словами.
  2. Один рабочий пример с ожидаемым результатом.
  3. Два частых сбоя и способ их предотвращения.
  4. Мини-шпаргалку по проверке качества перед публикацией.

Так материал превращается из "прочитал и забыл" в инструмент, который можно использовать в работе и обучении.

Термины простыми словами​

  • SLA — согласованный срок реакции и решения по обращению.
  • Инцидент — сбой, который нарушает работу сервиса.
  • Мастер-данные — ключевые справочники, общие для разных процессов.
  • TCO — полная стоимость владения решением за выбранный период.

См также​

Содержание