Как навязывается реактивность во Vue 3

Во Vue 3 реактивность не появляется у любой переменной автоматически. Вы создаете реактивный источник через ref, reactive, computed и другие API. После этого Vue может отслеживать, кто прочитал значение, и кого нужно обновить при изменении.

Для объектов основа механизма это Proxy. Proxy перехватывает операции вроде чтения свойства, записи нового значения, удаления поля и работы с коллекциями. Поэтому Vue видит не только "что значение изменилось", но и какой ключ был затронут.

Для примитивов Proxy напрямую не подходит, потому что примитив нельзя обернуть как объект с перехватом свойств. Поэтому ref(0) возвращает объект-обертку, а само число лежит в count.value.

Хороший короткий ответ можно построить в три шага.

1. Назвать источник реактивности: ref и reactive.
2. Объяснить механизм: Proxy для объектов и .value для ref.
3. Добавить практический риск: потеря реактивности при деструктуризации, забытая .value, лишняя глубокая реактивность.

Пример ответа:

Во Vue 3 реактивность появляется, когда состояние создается через ref, reactive или похожие API. reactive возвращает Proxy вокруг объекта и перехватывает чтение и запись свойств. ref нужен в том числе для примитивов и хранит значение в .value. Когда render, computed или watchEffect читает реактивное значение, Vue запоминает зависимость и потом обновляет только связанные эффекты.

Такой ответ показывает и механизм, и практику. Он лучше, чем фраза "Vue сам все отслеживает", потому что сразу видно, где границы автоматизации.

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

Если вы передаете отдельное поле reactive-объекта в composable, обычная деструктуризация может сломать связь. В таком случае используйте toRef или toRefs. Если объект тяжелый или пришел из внешней библиотеки, не включайте глубокую реактивность без причины.

Vue отслеживает зависимости во время выполнения активного эффекта. Активным эффектом может быть render компонента, getter computed или функция внутри watchEffect. Если во время выполнения было прочитано state.user.name, Vue связывает этот эффект с конкретным реактивным ключом.

Это важно для ответа на вопрос про "автоматическое" обновление. Автоматическое не значит "после любого изменения пересчитать все". Vue обновляет то, что связано с прочитанными реактивными данными. Если значение не было прочитано внутри эффекта, зависимости не возникнет.

В этом примере есть и примитив через ref, и объект через reactive.

<script setup>
import { computed, reactive, ref, toRefs } from 'vue'

const count = ref(0)

const form = reactive({
  name: '',
  accepted: false,
})

const { name } = toRefs(form)

const canSubmit = computed(() => {
  return name.value.trim().length > 0 && form.accepted
})

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

count это ref, поэтому в increment нужна запись через count.value. form это Proxy, поэтому form.accepted остается реактивным при чтении. Поле name вынесено через toRefs, поэтому оно не потеряло связь с form.name.

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

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

const count = ref(0)

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

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

В шаблоне {{ count }} показывает значение, а не сам объект ref. В функции add нужно менять count.value. Если сказать "ref разворачивается всегда", интервьюер легко поймает это уточняющим вопросом про script.

Смысл ответа не в том, чтобы перечислить все API Vue. Нужно показать, что вы понимаете контракт реактивности: состояние должно быть реактивным источником, чтение создает зависимость, запись триггерит связанные обновления.

Для frontend-кода из этого следуют простые правила. Не храните состояние UI в обычных локальных переменных, если от него должен обновляться шаблон. Не вытаскивайте поля reactive-объекта обычной деструктуризацией, если нужна связь. Не делайте глубоким реактивным то, что не должно участвовать в рендере, например тяжелый внешний инстанс.

Если ответить так, вы покажете не только знание Vue 3, но и способность избежать реальных багов: неработающей кнопки, зависшего computed, лишнего перерендера или сломанной формы.