Как сделать «Пакетное изменение свойств» для свойств и под-свойств в Polymer 3.0

Question

Данный код приведен в качестве примера:

class DemoElement extends PolymerElement {
   static get template() {
      return html`
         <p>[[abc]]</p>
         <p>[[def]]</p>
         <p>[[obj.a]] [[obj.b]]</p>
         <button on-click="test">test</button>
    `;
   }
   constructor() {
      super();
      this.abc = 1;
      this.def = 9;
      this.obj = {
         a: 1,
         b: 2,
      }
   }
   test() {
      this.setProperties({ abc: this.abc + 1, def: this.def + 1 });
      this.set('obj.a', this.obj.a + 1);
      this.set('obj.b', this.obj.b + 2)
   }
}
customElements.define('demo-element', DemoElement);

Согласно https://polymer -library.polymer-project.org / 3.0 / docs / devguide / data-system # batched-property-changes, похоже, я могу внести изменения в DOM в пакете, но когда я устанавливаю точку останова в обработчике событий test , Polymer обозреватель по-прежнему срабатывает три раза, так как сделать так, чтобы он срабатывал только один раз?

Редактировать: Сначала я думал, что это как-то связано с модификацией DOM, на самом деле это не так.Каждый фреймворк / библиотека пользовательского интерфейса должен изменять элементы dom отдельно, но браузер автоматически пакетирует эти изменения.

Answer 1

Я понял, что на самом деле спросил о полимерном Observer, но сначала подумал, что это модификация DOM.Так что «Пакетные изменения свойств» в Polymer Documatation - это запуск наблюдателя, но я неправильно понял это, чтобы изменить дом.Так что этот вопрос должен быть закрыт.

Answer 2

А как же:

test() {
  this.setProperties({
    abc: this.abc + 1,
    def: this.def + 1,
    obj: {
      ...this.obj,
      a: this.obj.a + 1,
      b: this.obj.b + 2,
    }
  });
}