Как среагировать на факт изменения объекта?

Question

[Надим]

Сейчас я как делаю, пишу специальную функцию редактор, через который и работаю везде с целевыми объектами. Грубо говоря, если мне надо что-то изменить в объекте, я это делаю не напрямую, а вызываю функцию редактор. Однако, я тут подумал, а может быть существуют какие-то иные способы реагировать на изменение объекта?

В идеале бы хотелось тупо повесить некий обработчик и уже в дальнейшем работать с объектом напрямую.

P. S. Смутное ощущение, что я этот вопрос уже задавал, не пинайте меня сильно если что)

Comments

[Сергей Соколов]

Proxy() ?

[Надим]

Сергей Соколов, да, есть такая штука, но я от него отказался, так как заморочено и намного проще и удобнее использовать функции редакторы. Может быть есть еще какие-нибудь интересные способы? Через прототипы там, например? Взять и прописать объекту свои собственные методы, которые после использования уже вызывают потом нужный обработчик.

[Сергей Соколов]

Надим Закиров, ну, сеттеры-геттеры можно прописать.

[Надим]

Сергей Соколов, если не сложно, сможете привести короткий пример? Допустим с сеттером.

[Роман]

есть еще https://developer.mozilla.org/en-US/docs/Web/API/M... но Proxy менее затратный с точки зрения производительности.

[Надим]

Роман, а разве MutationObserver может наблюдать за объектами?

[Сергей Соколов]

Надим Закиров,

class Watched {
  constructor() {
    this.props = {};
  }

  set width(value) {
    this.props.width = value;
    this.log("width", value); //  <-- ради этого всё затевалось
  }
  
  get width() {
    return this.props.width;
  }

  log(name, value) {
    console.log(`Property ${name} was set to ${value}`);
  }
}


const a = new Watched();

a.width = 100; // в консоль выведет сообщение

[Надим]

Сергей Соколов, большое спасибо за пример.

[Роман]

Надим Закиров, ох извините, действительно не то скинул. Имел ввиду Object.Observe, но пишут что он давно уже deprecated и рекомендуют использовать proxy (правда Object.Observe, опять выдвинули как кандидат на реализацию)

Answer 1

[Alex]

Вы можете использовать систему реактивности из фреймворка Vue. Вам не нужен весь фреймворк. Достаточно только @vue/reactivity (работает на Proxy)

Пример:

import { computed, effect, reactive } from "@vue/reactivity";

const obj = reactive({ foo: 1 }); // Реактивная переменная
const doubleFoo = computed(() => obj.foo * 2); // Вычисляемое свойство (Реактивная переменная которая автоматически пересчитывается когда изменяется какая-либо из использованных внутри реактивных переменных)
effect(() => console.log("doubleFoo value changed to:" + doubleFoo.value)); // Функция, запускается когда изменяется какая-либо из использованных внутри реактивных переменных)

// Каждую секунду изменяет значение obj.foo
// После чего автоматически пересчитывается значение doubleFoo 
// После изменения doubleFoo вызывается функция переданная в effect и выводится сообщение в лог
setInterval(() => obj.foo++, 1000)

https://codesandbox.io/embed/ecstatic-wind-68ez4?f...

Comments

[Alexandroppolus]

Либо использовать MobX, там те же штуки

[Надим]

На самом деле очень интересно, зря я Vue раньше обходил стороной, надо будет попробовать изучить.