Как отслеживать изменения в объекте?

Изменения в объекте отслеживают через: Proxy (перехват операций — современный способ), `Object.defineProperty` (геттеры/сеттеры — старый), библиотеки реактивности (Vue/MobX), или ручное сравнение.

Способы отслеживания

Proxy (современный, лучший)

Перехватывает чтение/запись/удаление свойств:

const observed = new Proxy(obj, {
  set(target, prop, value) {
    console.log(`${prop} изменено на ${value}`);
    target[prop] = value;
    return true;
  },
  deleteProperty(target, prop) {
    console.log(`${prop} удалено`);
    delete target[prop];
    return true;
  },
});

observed.name = 'Bob'; // "name изменено на Bob"

• Отслеживает все свойства, включая добавленные, вложенные (с рекурсией), массивы.
• Основа Vue 3, MobX.

Object.defineProperty (старый способ)

Геттеры/сеттеры для конкретных свойств:

Object.defineProperty(obj, 'name', {
  get() { return this._name; },
  set(value) { console.log('изменено'); this._name = value; },
});

• Основа Vue 2. Минусы: не отслеживает добавление новых свойств, элементы массива по индексу.

Библиотеки реактивности

Vue (reactive/ref), MobX (observable) — готовое отслеживание с автообновлением UI.

Ручное сравнение

Хранить копию и сравнивать (глубокое сравнение) — для простых случаев, неэффективно.

MutationObserver (для DOM, не объектов)

Отслеживает изменения DOM, не JS-объектов.

Как выбирать

• Современно, все изменения → Proxy.
• Реактивный UI → Vue/MobX (на Proxy).
• Legacy → Object.defineProperty.

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

Изменения объекта отслеживают через Proxy (перехват set/get/deleteProperty — современный способ, отслеживает все свойства, основа Vue 3/MobX), Object.defineProperty (геттеры/сеттеры — Vue 2, не ловит добавление свойств), библиотеки реактивности (Vue reactive, MobX observable), ручное сравнение (неэффективно). Для DOM — MutationObserver.