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

Реактивность во Vue3 удобно объяснять через две операции: чтение и запись. При чтении Vue понимает, что текущий рендер, computed, watchEffect или другой effect зависит от конкретного значения. При записи Vue находит зависимые эффекты и запускает обновление.

Поэтому сильный короткий ответ не должен сводиться к фразе, что Vue использует Proxy. Proxy перехватывает операции с объектом. Но обновление UI появляется из связки track, trigger и очереди обновлений.

import { reactive, watchEffect } from "vue";

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

watchEffect(() => {
  console.log(state.count); // чтение, Vue запоминает зависимость
});

state.count += 1; // запись, Vue запускает связанный effect

В компоненте за обновление шаблона отвечает render effect. Он читает реактивные данные во время рендера. Потом Vue обновляет только то, что зависит от измененных данных.

reactive принимает объект и возвращает Proxy. Proxy перехватывает чтение, запись, удаление свойств, проверку наличия ключа и часть операций с массивами и коллекциями. Это улучшило ситуацию по сравнению с подходом на Object.defineProperty, потому что Vue3 лучше видит добавление и удаление свойств.

ref нужен, когда значение не является объектом или когда удобнее иметь одну реактивную ссылку. Внутри это объект с реактивным свойством value. В шаблоне Vue часто разворачивает ref автоматически. В JavaScript-коде нужно явно обращаться к .value.

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

const count = ref(0);
const user = reactive({ firstName: "Ada", lastName: "Lovelace" });

const fullName = computed(() => `${user.firstName} ${user.lastName}`);

function increment() {
  count.value += 1;
}
</script>

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

Практический вывод для интервью простой. Называйте не только инструменты, но и их границы. reactive удобен для объекта состояния. ref удобен для отдельных значений. computed хранит производное значение. watch нужен для побочных эффектов.

Во Vue3 одну задачу часто можно решить несколькими способами. На интервью важно показать критерий выбора, а не спорить, что один API всегда лучше другого. Ошибка в выборе редко сразу ломает приложение. Чаще она приводит к тонким багам: лишним watcher, рассинхронизации состояния или потере реактивной связи.

Первая ловушка, это деструктуризация. Если взять свойство из reactive как обычную переменную, вы можете получить снимок значения вместо реактивной связи.

import { reactive, toRefs } from "vue";

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

// Плохо: count больше не читает значение через state Proxy.
const { count } = state;

// Лучше: countRef сохраняет связь с state.count.
const { count: countRef } = toRefs(state);
countRef.value += 1;

На интервью можно сказать коротко. Proxy отслеживает операции через Proxy. Если я вынес значение в обычную переменную, Vue уже не всегда видит чтение и запись как зависимость.

Вторая ловушка, это raw-объект и идентичность. reactive возвращает Proxy, поэтому исходный объект и реактивный объект не равны по ссылке.

const rawUser = { name: "Ada" };
const user = reactive(rawUser);

console.log(rawUser === user); // false

// Плохо: запись идет не через Proxy, эффекты могут не обновиться.
rawUser.name = "Grace";

// Хорошо: запись идет через Proxy.
user.name = "Grace";

Это важно для кэшей, Map, Set, сравнения по ссылке и интеграций с библиотеками. Если нужно исключить объект из реактивности, используют markRaw. Если нужно получить исходный объект, есть toRaw. Но это не обычный путь для бизнес-логики компонента.

Хороший ответ заканчивается тем, как это влияет на код компонента. Если данные нужны для UI, меняйте их через реактивную ссылку. Если значение можно вычислить из других значений, не создавайте отдельное состояние. Используйте computed. Если нужно сходить в API, записать в localStorage или отправить аналитику при изменении, используйте watch или watchEffect и следите за cleanup.

import { ref, watch } from "vue";

const query = ref("");
const results = ref([]);
const loading = ref(false);
const error = ref(null);

watch(query, async (value, _previousValue, onCleanup) => {
  const trimmed = value.trim();
  const controller = new AbortController();

  onCleanup(() => controller.abort());

  if (!trimmed) {
    results.value = [];
    error.value = null;
    loading.value = false;
    return;
  }

  loading.value = true;
  error.value = null;

  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}`, {
      signal: controller.signal,
    });

    if (!response.ok) {
      throw new Error("Search failed");
    }

    results.value = await response.json();
  } catch (err) {
    if (err?.name === "AbortError") {
      return;
    }

    results.value = [];
    error.value = "Не удалось загрузить результаты";
  } finally {
    if (!controller.signal.aborted) {
      loading.value = false;
    }
  }
});

Здесь cleanup важен. Без отмены старого запроса можно получить race condition. Пользователь уже ввел новый запрос, а в UI прилетели результаты для старого значения. Без loading и error интерфейс зависнет в непонятном состоянии. Человек не поймет, идет загрузка, результатов нет или запрос сломался.

Можно ответить так:

Во Vue3 реактивность построена на Proxy для объектов и ref для отдельных значений. Когда код читает реактивное свойство, Vue собирает зависимость. Когда свойство меняется, Vue вызывает связанные эффекты и планирует обновление компонента. Поэтому UI обновляется не потому, что Vue постоянно проверяет все данные, а потому что он знает, какие эффекты зависят от каких ключей.

Если хотите усилить ответ, добавьте практическую часть:

В коде я учитываю несколько ловушек. Не деструктурирую reactive без toRefs, не меняю raw-объект напрямую, использую computed для производных значений, а watch оставляю для побочных эффектов вроде запросов и синхронизации.