Как работает система реактивности Vue 3 под капотом?

Question

Accepted Answer

Реактивность Vue 3 построена на JavaScript **Proxies**. Когда вы делаете state реактивным, Vue оборачивает его в Proxy, который **перехватывает чтение и запись**, позволяет **отслеживать**, какие эффекты зависят от каких свойств, и **запускает** эти эффекты повторно, когда данные изменяются.

## Почему это важно

```js
// a simplified mental model of reactive()
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // record "the current effect depends on obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // re-run every effect that depended on obj.key
      return true;
    },
  });
}
```

Чтение свойства **отслеживает** текущий выполняемый эффект как зависимость; запись в него **запускает** все эффекты, которые его читают. Так Vue *точно* знает, какой компонент нужно перерендерить или какие вычисляемые свойства обновить, когда изменяется определённое свойство.

## Эффекты связывают всё вместе

```js
// component render, computed, and watchers all run inside an "effect"
effect(() => {
  document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
```

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

## Почему Proxy (Vue 3) лучше Object.defineProperty (Vue 2)

```js
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1;   // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5;         // ❌ index assignment
this.arr.length = 0;     // ❌ length changes

// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
```

Proxies перехватывают *весь объект* (любой ключ, добавления, удаления, мутации массивов), избегая известных ограничений Vue 2 — больше не нужны обходные пути с `Vue.set`.

## ref vs reactive внутри

```text
reactive(obj) → returns a Proxy of the object
ref(value)    → returns an object { value } whose .value access is tracked
                (so primitives can be reactive — Proxies only wrap objects)
```

## Почему это важно

Понимание модели track/trigger на Proxy объясняет, *почему* Vue настолько эффективен (обновляет только эффекты, которые действительно зависят от изменённых данных — мелкозернистая реактивность) и *почему* старые ограничения Vue 2 существовали и исчезли в Vue 3.

Это также уточняет практические правила: почему `reactive` требует объекты (Proxies не могут оборачивать примитивы, отсюда `ref`), и почему деструктурирование `reactive` нарушает отслеживание (вы отделяете значение от перехвата get/set Proxy).