Как работать с библиотекой on-change

Библиотека on-change из npm предназначена для отслеживания изменений в объектах JavaScript. Она позволяет добавить обработчики событий на изменения свойств объекта.

Для начала установите библиотеку on-change с помощью npm:

npm install on-change

Затем можно использовать данную библиотеку в своем коде:

import onChange from 'on-change';

const obj = {
  foo: 'bar',
  nested: {
    prop: 'value'
  }
};

const watchedObj = onChange(obj, (path, value, previousValue) => {
  console.log(`Путь "${path}" изменился с ${previousValue} на ${value}`);
});

watchedObj.foo = 'new value';
// Вывод: Путь "foo" изменился с bar на new value

watchedObj.nested.prop = 'new value';
// Вывод: Путь "nested.prop" изменился с value на new value

В этом примере вызывается функция onChange(), в которую передается объект и функция-колбек. Функция onChange() возвращает новый объект, который по своей структуре не отличается от переданного объекта.

Теперь, при каждом изменении объекта watchedObj будет вызываться функция-колбек, которая была передана в onChange() вторым параметром.

В свою очередь функция-колбек принимает несколько параметров:

1. path — это имя ключа (свойство), которое было изменено в объекте. Если ключ вложенный, то имя будет содержать точку-разделитель с полным набором ключей, как это обычно происходит при обращении к вложенному свойству. Например: nested.prop.
2. value — это новое значение, которое было назначено в свойство при изменении объекта
3. previousValue — это предыдущее значение, которое хранилось в этом свойстве до изменения объекта

В примере выше, при изменении свойств foo и nested.prop в объекте watchedObj, вызывается обработчик изменений (функция-колбек), который выводит информацию о том, какое значение было до изменения и какое значение стало после изменения.