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

Реактивность во Vue3 основана на Proxy API. Когда создаётся реактивный объект через reactive(), Vue оборачивает его в Proxy, который перехватывает все операции чтения/записи свойств.

При чтении свойства:

1. Proxy регистрирует зависимость (если есть активный эффект)
2. Возвращает значение

При изменении свойства:

1. Proxy перехватывает изменение
2. Триггерит обновление всех зарегистрированных зависимостей

Пример:

import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log(state.count) // Автоматически отслеживает count
})

state.count++ // Вызовет эффект снова

Для примитивов используется ref(), которая оборачивает значение в объект с .value. Композиция API (computed, watch) также построена на этой системе. Оптимизировано через отслеживание зависимостей на уровне свойств, а не объектов.