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观察器仍然会触发3次，因此如何使它只触发一次？

编辑：起初我以为它与dom修改有关，实际上不是。每个ui框架/库都必须分别更改dom元素，但是浏览器将自动将这些更改批处理。

Answer 1

那又怎么样：

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

Answer 2

我意识到我实际上是在问聚合物观察者，但起初我以为是关于dom修改的。因此，Polymer Documatation中的“批处理属性更改”与观察者触发有关，但是我误将其理解为dom修改。因此，应关闭此问题。

如何在Polymer 3.0中对属性和子属性进行“批处理属性更改”

2 个答案: