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

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

Во Vue 3 реактивность построена на Proxy — более мощном и гибком механизме, который перехватывает все операции с объектом, включая добавление и удаление свойств. Это позволяет сделать реактивность более полной и производительной, а также упростить внутреннюю реализацию. Кроме того, Vue 3 предоставляет Composition API, который тесно связан с реактивностью и позволяет более гибко управлять состоянием.

Пример реактивности во Vue 3 с Composition API:

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

watch(() => state.count, (newVal) => {
  console.log('Count изменился на', newVal);
});

state.count++;

Таким образом, основное отличие — переход от defineProperty к Proxy, что расширяет возможности и улучшает производительность реактивной системы.

Что такое реактивность и как она работает во Vue? В чём разница между реактивностью во Vue 2 и Vue 3?