Во Vue 3 реактивность реализована с помощью Proxy, в отличие от Vue 2, где использовался Object.defineProperty.

Отличия:

Proxy позволяет перехватывать операции с объектом целиком, включая добавление и удаление свойств, что невозможно с Object.defineProperty.
Благодаря Proxy реактивность стала более полной и производительной.
Vue 3 может отслеживать изменения в массивах и объектах без необходимости обхода всех свойств при инициализации.

Пример использования Proxy для реактивности:

const state = new Proxy({ count: 0 }, {
  get(target, prop) {
    console.log(`Читаем свойство ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Устанавливаем ${prop} = ${value}`);
    target[prop] = value;
    // здесь можно уведомить подписчиков
    return true;
  }
});

state.count = 1; // Устанавливаем count = 1
console.log(state.count); // Читаем свойство count

В Vue 2 реактивность создавалась через Object.defineProperty для каждого свойства, что ограничивало динамическое добавление новых свойств и усложняло отслеживание изменений.

Как работает реактивность во Vue 3? В чём отличие от Vue 2 (Proxy vs Object.defineProperty)?