Vue.js: основы, Vuex и Pinia

Vue 3 — прогрессивный фреймворк: SFC (.vue), Composition API (setup, ref, reactive, computed), реактивность на Proxy. Pinia — официальный стор (замена Vuex для новых проектов). React-альтернатива в курсе — React: компоненты и хуки.

1. Минимальный SFC

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

2. Pinia store

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", () => {
  const name = ref("");
  function setName(n: string) {
    name.value = n;
  }
  return { name, setName };
});

defineStore + composition стиль близок к хукам.

3. Vuex (legacy)

Модули, mutations (строгий поток), actions async. Для новых приложений предпочтительнее Pinia (проще типизация, нет mutations boilerplate).

4. Роутинг

Vue Router: динамические сегменты /user/:id, navigation guards для auth.

5. Provide / Inject

Для глубоко вложенных деревьев без prop drilling: provide('key', value) в предке и inject('key') в потомке. С TypeScript используйте InjectionKey<T> для типобезопасности. Не злоупотребляйте — явные props проще отлаживать; provide/inject чаще для темы UI и редких cross-cutting зависимостей.

6. Реактивность: ref vs reactive

ref удобен для примитивов и единичных значений; в шаблоне разворачивается автоматически. reactive для объектов состояния — помните про деструктуризацию (теряется реактивность без toRefs). Для крупных форм часто computed + небольшие ref.

7. Производительность и SSR

v-once, v-memo для статичных поддеревьев. При SSR (Nuxt) разделяйте код, обращающийся к window, в onMounted или клиент-only обёртки. Pinia stores hydration в Nuxt — следуйте официальному паттерну useState.

8. Чек-лист

• <script setup> + TypeScript.
• Крупные списки — виртуализация.
• Официальный style guide и ESLint plugin eslint-plugin-vue.
• key на v-for по стабильному id.
• Ленивые маршруты () => import() для крупных страниц.

Дальше: Tailwind CSS