Что заставляет данные быть реактивными во Vue

Во Vue данные становятся реактивными благодаря системе реактивности, основанной на JavaScript Proxy (в Vue 3) или геттерах/сеттерах (в Vue 2). Vue автоматически отслеживает изменения данных и обновляет DOM при их изменении.

Vue 3 (Proxy):

const data = { count: 0 };
const reactiveData = new Proxy(data, {
  get(target, key) { /* отслеживаем чтение */ },
  set(target, key, value) { /* триггерим обновление */ }
});

Vue 2 (Геттеры/Сеттеры):

Object.defineProperty(data, 'count', {
  get() { /* отслеживаем */ },
  set(newVal) { /* обновляем */ }
});

Особенности:

• Реактивность работает только для свойств, объявленных в data() изначально
• Для добавления новых свойств нужно использовать Vue.set() (Vue 2) или реактивные методы (Vue 3)
• Массивы и объекты требуют особого подхода из-за ограничений JavaScript