Ключевые концепции и основы фреймворка

Vue 3 — современный, лёгкий и реактивный фреймворк для построения пользовательских интерфейсов. Его ключевые преимущества — реактивность, компонентный подход и простота интеграции даже в уже существующие проекты.

1. Реактивность в JavaScript

Реактивность — это способность системы автоматически отслеживать и реагировать на изменения данных. В чистом JavaScript можно реализовать простейшую реактивность с помощью Proxy:

const state = { count: 0 };

const reactiveState = new Proxy(state, {
  set(target, key, value) {
    target[key] = value;
    console.log(`Изменено: ${key} → ${value}`);
    return true;
  }
});

reactiveState.count++; // Лог: Изменено: count → 1

Однако ручное обновление интерфейса при изменении данных быстро становится сложным. Именно здесь на помощь приходит Vue.

2. Реактивность во Vue 3

В Vue 3 реактивность реализована на основе Proxy — но с гораздо большей мощностью. Достаточно создать реактивный объект с помощью reactive() и описать реакцию с помощью effect():

import { reactive, effect } from 'vue';

const state = reactive({ count: 0 });

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count++; // Автоматически вызовет effect()

Функция reactive() делает объект наблюдаемым, а effect() отслеживает его изменения и запускается при каждом обновлении. Именно это лежит в основе реактивного ядра Vue 3 и делает интерфейс "живым" без дополнительного кода.

3. Виртуальный DOM

Когда данные изменяются, Vue должен обновить HTML-структуру страницы. Делать это напрямую дорого с точки зрения производительности, особенно при большом количестве компонентов.

Чтобы избежать избыточных обновлений, Vue 3 использует виртуальный DOM — лёгкое, абстрактное представление реального дерева элементов.

Принцип работы прост:

1. Vue создаёт виртуальную копию DOM в памяти.

2. При изменении данных создаётся новое виртуальное дерево.

3. Vue сравнивает старую и новую версии (процесс называется diffing).

4. В реальный DOM вносятся только те изменения, которые действительно необходимы.

Это делает обновления интерфейса максимально эффективными — браузер перерисовывает только то, что изменилось, а не весь компонент.

💡 Виртуальный DOM — как черновик для интерфейса: Vue сначала проверяет, что изменилось на бумаге, а потом аккуратно обновляет страницу.

4. Single File Components (SFC)

Vue-компоненты удобно оформляются в Single File Components (SFC) — .vue-файлы, которые объединяют разметку, логику и стили в одном месте:

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

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

const count = ref(0);
const increment = () => count.value++;
</script>

<style scoped>
button { padding: 6px 12px; }
</style>

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

5. Options API и Composition API

Vue 3 поддерживает два стиля описания логики компонента:

Options API — классический способ:

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

Composition API — современный подход:

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

Composition API делает код более гибким и модульным: можно удобно группировать логику по смыслу, а не по типу свойства.

6. Пример компонента Vue 3

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="toggle">Показать / Скрыть</button>
    <p v-if="visible">Vue 3 делает реактивность простой!</p>
  </div>
</template>

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

const message = 'Пример компонента Vue 3';
const visible = ref(true);
const toggle = () => (visible.value = !visible.value);
</script>

<style scoped>
button { margin-top: 10px; }
</style>