> Как реализована реактивность во Vue 2 и Vue 3 и в чем их отличия (Vue.js)

В Vue 2 реактивность реализована через Object.defineProperty(). При инициализации компонента Vue рекурсивно обходит все свойства объекта data и переопределяет их геттеры/сеттеры. Каждое свойство получает свой экземпляр Dep (зависимость), который собирает подписчиков (Watcher'ов) при чтении и уведомляет их при записи. Недостатки: не отслеживает добавление новых свойств (нужен Vue.set()), удаление свойств, а также изменения по индексу массива (нужен splice).

В Vue 3 используется Proxy из ES6. Прокси оборачивает весь объект целиком, перехватывая операции чтения, записи, удаления, проверки наличия ключа (in) и даже итерации. Это позволяет:

• Отслеживать добавление и удаление свойств без специальных методов.

• Работать с массивами по индексу и с length напрямую.

• Лениво инициализировать вложенные объекты (реактивность создается только при обращении).

Основные отличия:

1. Механизм: Object.defineProperty (Vue 2) vs Proxy (Vue 3).

2. Отслеживание изменений: Vue 2 требует Vue.set/Vue.delete для новых/удаленных ключей; Vue 3 обрабатывает их автоматически.

3. Массивы: Vue 2 переопределяет мутирующие методы (push, pop и т.д.), но не ловит прямое присвоение по индексу; Vue 3 ловит любые операции.

4. Производительность: Vue 3 быстрее при инициализации, так как не нужно рекурсивно обходить все свойства сразу - прокси создает ловушки по требованию.

5. Совместимость: Vue 2 работает в IE11 (с полифиллами), Vue 3 не поддерживает IE11 из-за Proxy.

Также в Vue 3 появилась Composition API, которая использует ref() и reactive() - обертки над Proxy, дающие более гибкое управление реактивностью.