Что заставляет данные быть реактивными во Vue?

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

Реактивность - это система, которая автоматически отслеживает изменения данных и обновляет DOM при их изменении. Это сердце Vue, делающее фреймворк таким удобным для разработки.

Как Vue делает данные реактивными

1. Proxy (Vue 3)

В Vue 3 используется JavaScript Proxy - специальный объект, который перехватывает операции с данными:

// Как это работает внутри Vue
const data = reactive({
  count: 0,
  name: 'John'
});

// Vue оборачивает это в Proxy:
const handler = {
  get(target, key) {
    // Отслеживание: данные используются
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    if (target[key] !== value) {
      target[key] = value;
      // Триггеринг: данные изменились
      trigger(target, key);
    }
    return true;
  }
};

const proxy = new Proxy(data, handler);

Теперь каждый раз когда мы:

• Читаем свойство (get) - Vue отслеживает это
• Изменяем свойство (set) - Vue срабатывает и обновляет компоненты

2. Dependency Tracking

Вю отслеживает, какой компонент использует какие данные:

<template>
  <div>{{ count }}</div>  <!-- Компонент "подписался" на count -->
  <button @click="count++">Increment</button>
</template>

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

const count = ref(0);
// Когда компонент рендерится, Vue видит обращение к count
// и добавляет этот компонент в "subscribers" переменной count
</script>

3. Trigger Updates

Когда данные изменяются, Vue:

1. Видит изменение через Proxy
2. Находит все компоненты, которые это используют
3. Переренде риват только эти компоненты

const count = ref(0);

// Нажимаем кнопку
count.value++; // Vue срабатывает!
// 1. Proxy перехватывает изменение
// 2. Vue находит все компоненты с count
// 3. Обновляет их в DOM

Ref vs Reactive

ref() - для примитивов

import { ref } from 'vue';

const count = ref(0);
const name = ref('John');

// Нужно использовать .value в скрипте
count.value++;
console.log(name.value);

// В шаблоне .value НЕ нужен
// <div>{{ count }}</div> - автоматически

reactive() - для объектов

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 30
  }
});

// Без .value
state.count++;
console.log(state.user.name);

// Но есть ограничение - нельзя деструктурировать
const { count } = state; // Теряется реактивность!
const count = state.count; // Плохо

Computed (вычисляемые свойства)

Автоматически обновляются при изменении зависимостей:

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  // Зависит от firstName и lastName
  return `${firstName.value} ${lastName.value}`;
});

firstName.value = 'Jane';
// fullName АВТОМАТИЧЕСКИ обновится
console.log(fullName.value); // "Jane Doe"

Watchers - явное отслеживание

Когда нужна кастомная логика при изменении данных:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count изменился с ${oldValue} на ${newValue}`);
  // Можем выполнить побочные эффекты
  saveToDatabase(newValue);
});

count.value++; // Сработает watch

Reactive vs Non-Reactive (Vue 2 подход)

В Vue 2 было по-другому, но важно понимать разницу:

// Vue 2 - Object.defineProperty
Object.defineProperty(obj, 'count', {
  get() {
    console.log('Читаем count');
    return this._count;
  },
  set(value) {
    console.log('Устанавливаем count');
    this._count = value;
  }
});

Ограничения реактивности

// ПЛОХО - новое свойство не будет реактивным
const state = reactive({ name: 'John' });
state.age = 30; // Работает, но не реактивно

// ХОРОШО
const state = reactive({ name: 'John', age: undefined });
state.age = 30; // Теперь реактивно

// ПЛОХО - удаление свойства
delete state.name; // Не рекомендуется

// ХОРОШО
state.name = undefined; // Или использовать другой подход

Глубокая реактивность (Deep Reactivity)

const state = reactive({
  user: {
    profile: {
      name: 'John',
      age: 30
    }
  }
});

// Даже глубокие изменения реактивны
state.user.profile.name = 'Jane'; // Компонент обновится

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

Вуе использует fine-grained reactivity, то есть обновляет только то, что действительно изменилось:

const items = ref([
  { id: 1, name: 'Item 1', checked: false },
  { id: 2, name: 'Item 2', checked: false }
]);

// Измениваем только один элемент
items.value[0].checked = true;
// Vue знает, что нужно обновить только первый элемент в DOM

Деактивация реактивности

Иногда нужно отключить реактивность для производительности:

import { shallowRef, shallowReactive } from 'vue';

// Только верхний уровень реактивен
const state = shallowReactive({ count: 0, nested: { value: 1 } });
state.count++; // Реактивно
state.nested.value = 2; // НЕ реактивно

Итого

Реактивность во Vue - это автоматическое отслеживание зависимостей и обновление UI при изменении данных. Механизм работает через Proxy/Object.defineProperty и dependency tracking, что делает Vue очень удобным для разработки без необходимости вручную управлять обновлениями.