Как устроена реактивность Vue 3 и чем она отличается от Vue 2?

Vue 3 строит реактивность на Proxy, Vue 2 — на Object.defineProperty.

Как работает

1. reactive оборачивает объект в Proxy.
2. При чтении свойства внутри эффекта (render, computed, watch) вызывается track: Vue запоминает, что эффект зависит от этого свойства.
3. При записи вызывается trigger: Vue перезапускает все эффекты, подписанные на свойство.

// упрощённо
const proxy = new Proxy(target, {
  get(t, key) { track(t, key); return t[key]; },
  set(t, key, value) { t[key] = value; trigger(t, key); return true; },
});

Преимущества Proxy над defineProperty

• Обнаруживает добавление и удаление свойств, а во Vue 2 для этого нужны были Vue.set и Vue.delete.
• Следит за индексами массивов и length.
• Поддерживает Map и Set.
• Оборачивает вложенные объекты лениво, при обращении, а не обходит весь объект сразу.

Нюанс

Proxy нельзя полифилить, поэтому Vue 3 не поддерживает IE11.

Коротко для собеседования

Vue 3 перехватывает чтение и запись через Proxy: чтение подписывает эффект, запись его перезапускает. Это снимает ограничения Vue 2.