Что такое Vue.js: обзор для начинающих

Vue.js в двух словах

Vue.js — это прогрессивный JavaScript-фреймворк для создания пользовательских интерфейсов. «Прогрессивный» значит, что его можно подключить к одной странице ради небольшого виджета, а можно построить на нём целое одностраничное приложение (SPA).

Две идеи, на которых всё держится:

• Компоненты — интерфейс собирается из независимых блоков: кнопка, карточка, форма.
• Реактивность — вы меняете данные, а Vue сам обновляет нужные места на странице.

Vue ценят за низкий порог входа, понятную документацию и то, что шаблоны похожи на обычный HTML.

Однофайловые компоненты

Компонент во Vue обычно живёт в файле .vue (Single-File Component, SFC). В нём три части: логика, разметка и стили.

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

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

<template>
  <button @click="count++">Нажато: {{ count }}</button>
  <p>Удвоенное значение: {{ double }}</p>
</template>

<style scoped>
button { padding: 8px 16px; }
</style>

Это рабочий пример счётчика. scoped означает, что стили действуют только внутри этого компонента.

Как работает реактивность

• ref() создаёт реактивное значение. В скрипте к нему обращаются через .value, в шаблоне — напрямую.
• reactive() делает реактивным целый объект.
• computed() — вычисляемое значение, которое пересчитывается только при изменении зависимостей.
• watch() — запускает код, когда меняется конкретное значение, например чтобы отправить запрос.

Vue отслеживает, какие данные используются в шаблоне, и при изменении перерисовывает только то, что от них зависит.

Composition API или Options API

Оба API официально поддерживаются. Для новых проектов чаще выбирают Composition API: код легче переиспользовать через свои функции-composables, например useCart() или useAuth().

Pinia: общее состояние

Когда одни и те же данные нужны многим компонентам — пользователь, корзина, настройки, — их выносят в хранилище. Официальная библиотека для этого — Pinia.

import { defineStore } from "pinia";

export const useCartStore = defineStore("cart", {
  state: () => ({ items: [] }),
  getters: {
    total: (state) => state.items.length,
  },
  actions: {
    add(item) {
      this.items.push(item);
    },
  },
});

В любом компоненте достаточно вызвать useCartStore(), и все подписанные компоненты обновятся при изменении корзины.

Vue Router: страницы без перезагрузки

Vue Router — официальный роутер. Он связывает адреса с компонентами и переключает страницы без полной перезагрузки браузера.

import { createRouter, createWebHistory } from "vue-router";
import Home from "./pages/Home.vue";
import Product from "./pages/Product.vue";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/product/:id", component: Product },
  ],
});

В шаблонах вместо <a> используют <RouterLink to="/">, а место для текущей страницы обозначают <RouterView />.

С чего начать

1. Установите Node.js и создайте проект официальной командой npm create vue@latest — она предложит подключить Router, Pinia и TypeScript.
2. Разберите реактивность и компоненты на небольших примерах.
3. Добавьте маршруты и одно хранилище.
4. Если важны SEO и серверный рендеринг, посмотрите на Nuxt — фреймворк поверх Vue.

Официальная документация: vuejs.org.

Частые ошибки новичков

• Забывают .value при работе с ref в скрипте.
• Деструктурируют reactive-объект и теряют реактивность.
• Хранят в Pinia всё подряд, даже локальное состояние одной формы.
• Мутируют props внутри дочернего компонента вместо отправки события через emit.