Библиотека 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() вторым параметром.
В свою очередь функция-колбек принимает несколько параметров:
path— это имя ключа (свойство), которое было изменено в объекте. Если ключ вложенный, то имя будет содержать точку-разделитель с полным набором ключей, как это обычно происходит при обращении к вложенному свойству. Например:nested.prop.value— это новое значение, которое было назначено в свойство при изменении объектаpreviousValue— это предыдущее значение, которое хранилось в этом свойстве до изменения объекта
В примере выше, при изменении свойств foo и nested.prop в объекте watchedObj, вызывается обработчик изменений (функция-колбек), который выводит информацию о том, какое значение было до изменения и какое значение стало после изменения.
