Options API, scoped-стили и что дальше

Подводим итоги курса: сравниваем два стиля написания компонентов, вспоминаем про scoped-стили и намечаем, куда двигаться дальше — вплоть до Nuxt.

Options API — классический стиль Vue, где логика разложена по опциям (data, methods, computed). Composition API — современный стиль (его мы и учили), где логика группируется по смыслу в setup.

Два стиля одного компонента

Vue поддерживает оба подхода. Вот один и тот же счётчик в Options API:

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

И он же в Composition API со script setup — то, что мы использовали весь курс:

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

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

Чем они отличаются

В больших компонентах Options API «размазывает» одну фичу по разным опциям: кусок в data, кусок в methods, кусок в computed. Composition API держит всё, что относится к одной задаче, рядом — и позволяет вынести это в composable. Поэтому для нового кода рекомендуют именно его, но Options API остаётся валидным и встречается в существующих проектах.

Scoped-стили: напоминание

Мы видели <style scoped> в первом разделе. Это важная часть гигиены проекта: стили компонента не протекают наружу. Без scoped класс .title из одного компонента переопределил бы .title в другом — глобальный CSS становится минным полем. scoped изолирует стили автоматически, и одинаковые имена классов в разных компонентах мирно сосуществуют.

Что вы уже умеете

Промоделируем «прогресс по курсу» как список освоенных тем:

const learned = [
  "Реактивность: ref, reactive, computed, watch",
  "Шаблоны: v-bind, v-if, v-for, v-on, v-model",
  "Компоненты: props, emits, slots, provide/inject",
  "Жизненный цикл и composables",
  "Экосистема: Router, Pinia",
];

console.log("Освоено тем:", learned.length);
learned.forEach((topic, i) => console.log(`  ${i + 1}. ${topic}`));

Вывод:

Освоено тем: 5
  1. Реактивность: ref, reactive, computed, watch
  2. Шаблоны: v-bind, v-if, v-for, v-on, v-model
  3. Компоненты: props, emits, slots, provide/inject
  4. Жизненный цикл и composables
  5. Экосистема: Router, Pinia

Куда расти дальше

• Nuxt — метафреймворк над Vue: серверный рендеринг (SSR) для SEO и скорости, файловая маршрутизация, серверные функции. Логичный следующий шаг для production-приложений.
• TypeScript во Vue — типизация пропсов и состояния; script setup отлично с ним дружит.
• Тестирование — Vitest и Vue Test Utils для проверки компонентов.
• UI-библиотеки — Vuetify, PrimeVue, Naive UI для готовых компонентов.

Итог

• Vue поддерживает Options API и Composition API; для нового кода рекомендуют второй.
• Composition API группирует логику по смыслу и позволяет выносить её в composables.
• scoped-стили изолируют CSS компонента и спасают от конфликтов классов.
• Дальше: Nuxt (SSR), TypeScript, тестирование и UI-библиотеки.